Continuous Scales

比例尺是 D3 的重要概念, 用来代替使用像素表示大小.

实际上上一篇中在随机生成数值的时候, 考虑到数值都是小数, 故而进行了 × 1000 的操作. 但是如果随后的到的数值不再是小数, 而就是一个比如 1000+ 的整数呢? 如果不 × 1000 的话很明显统计结果是完全不可靠的; 但如果 1000 × 1000 这个数值使用像素来表示已经无法在屏幕上看到结果了. 确实需要修改代码, 需要有类似于整体缩放的功能, 也许需要是动态缩放.

比例尺就是用来应付这种情况的, 它大致是将上述的结果做了一个等比缩放, 已适用于各种大小数值都可以用可观的比例形式展示.

Continuous Scales 连续比例尺

连续比例尺可以将连续的, 定量的输入(domain) 映射到连续的输入(range). 如果输出范围也是数值, 则这种映射关系可以被 inverted(反转).

以下 continuous 表示连续比例尺函数, 该函数包含了很多方法.

continuous(domainValue)

首先, continuous 本身是一个函数, 它接收一个 domainValue, 返回一个对应的 rangeValue.

假设:

• domain: [10, 110]
• range: [0, 666]

那么:

• continuous(10); // 返回 0
• continuous(110); // 返回 666

continuous.domain([...values])

continuous 是一个包含有自己的方法的函数, 因此它可以使用各种方法, domain 就是其中之一.

...values 表示 domain 方法接收的数组支持任意多个数值, 不过通常来说, 必须是 2 个(包含 2 个)以上.

当 ...values 只有两个值时, 他们分别表示最大值和最小值.

domain([min, max]) 方法接收一个包含两个值的数组

• min: 设置 domain 最小值, 一般来说是要渲染的列表数据集中最小值
• max: 设置 domain 最大值, 一般来说是要渲染的列表数据集中最大值

当 ...values 有 3 个值时, 他们将被拆分为两个域段, 例如:

let sl = d3.scaleLinear()
  .domain([10, 20, 110])
  .range([0, 10, 300]);

console.log(sl(19)); // 9
console.log(sl(21)); // 13.222222222222221

它相当于设置了两个 domain 与 range 的对应关系, 分别是:

• domain[10, 20] -> range[0, 10]
• domain[20, 10] -> range[10, 300]

可以看到上面的例子当中, sl(19) 与 sl(21) 都与 sl(20) 只是差了 1, 然而 rangeValue 却完全不同.

continuous.domain([...values]) 的返回值仍然是一个 continuous 函数, 所以可以链式的调用 continuous 的各种方法.

continuous.range([...values])

一般来说, domain[...values] 与 range[...values] 的 values 的个数应该是对应. 官方喜欢使用分段颜色比例尺(diverging color scale)做案例来说明. 他有点像是两个颜色之间过度的感觉.

拿一个例子来说明一下, 以下为 body 中的代码:

<ul></ul>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
  let sl = d3.scaleLinear()
    .domain([-255, 0, 255])
    .range(['#f00', '#0f0', '#00f']);

  let data = [-200, 55, 125];

  d3.select('ul').selectAll('li')
    .data(data)
    .enter()
    .append('li')
    .text(x => sl(x))
    .style('background-color', v => sl(v))

我们定义了 domain[-255, 0, 255] 三个域值, 为了分别对应 RGB 三个色值. range(['#f00', '#0f0', '#00f']) 定义域值对应的区间段.

通过修改 data 的数值, 可以在浏览页面是看到不同的颜色.

竟然意料之外的感觉会非常实用, 根据这种思想可以实现用户自定义页面颜色的功能.

continuous() + continuous.domain([...values]) + continuous.range([...values])

3 个概念都熟悉以后, 这里再来具体说一下 domain 与 range 的相互关系, 见下方代码:

let sl = d3.scaleLinear()
  .domain([10, 110])
  .range([0, 666]);
// domain -> range
console.log('11 ->', sl(11));
console.log('109 ->', sl(109));
// range -> domain
console.log('6.66 ->', sl.invert(6.66));
console.log('659.34 ->', sl.invert(659.34));
// overflow
console.log('9 ->', sl(9));
console.log('699 ->', sl.invert(699));

结果输出如下:

11 -> 6.66
109 -> 659.34
6.66 -> 11
659.34 -> 109.00000000000001
9 -> -6.66
699 -> 114.95495495495494

这里给出的 domain 是 [10, 110], range 是 [0, 666]

可以在结果当中看到 domain 11 成功映射到了 range 6.66; 反转后 range 6.66 也成功映射到了 domain 11;

continuous.invert() 即反转函数

不过当输入 domain 9 时, 也成功的的到了对应的 range -6.66(负数<10<整数), 显然这不是事先约定好的 domain 与 range 的对应范围所包括的内容.

continuous 会在没有启动 clamp 时, 将给定不属于 domain 的值推算出对应的 range.

continuous.invert(rangeValue)^[1]

invert() 用来方向取域值, 意思很好懂. 不过他也有一些短板.

• 只适用于 range 为数值类型
• 非数值 range 将的到一个 NaN
• 反向取值由于精确度, 所以并不完全对等

continuous.clamp(boolean)^[2]

clamp() 的官方翻译叫做钳位.

使用 scale.clamp(true) 可以开启钳位功能, 开启后即使 domain/range 越界, range/domain 仍然会保持在规定范围内.

关于钳位这个词我个人是真的读不懂, 我认为解释为封顶就足够理解了, 有点类似于股票的走势, 无论涨跌, 每天都有最大限制, 到顶后, 再涨也没有意义了.

continuous.interpolate(interpolate)

interpolate() 函数接收一个插值器, 如果没有显示的指定插值器, 则 continuous 使用默认的插值器 d3.interpolate.

continuous 默认启用 .interpolate(d3.interpolate), 插值器.

let sl = d3.scaleLinear()
  .domain([10, 110])
  .range([0, 666])
  .interpolate(d3.interpolate);

关于插值器的作用的话, 目前认为更加的偏向于一种映射规则. 比如 0 是否应该映射为 1, 或者 1.25, 或者 #f0f.

d3.interpolate 默认插值器实际上会根据判断 rangeValue 来具体的适配不同的更加明确的插值器. 比如 d3.interpolateNumber 插值器, d3.interpolateRound 插值器等等.

continuous.rangeRound([...values])

rangeRound 相当于启用 d3.interpolateRound 插值器(支持四舍五入映射规则的插值器).

continuous
    .range(range)
    .interpolate(d3.interpolateRound);

continuous.ticks([count])

ticks() 函数会将 domain 的最大值与最小值等差划分为 N 份, 然后作为一个数组返回.

ticks() 的结果看起来与尺子的刻度线非常的相似, 也因此常被用来显示刻度线或者刻度标记.

用法:

let sl = d3.scaleLinear()
  .domain([0, 10, 653])
  .range([0, 60, 666]);

console.log(sl.ticks()); // [ 0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650]

ticks(count) 是可以接收一个 count 参数的, count 指定期望返回多少个"刻度". 然而, 实际情况是并不一定返回期望的个数的值. 为了保证等差的特性, 人类友好性, 返回的刻度数量确实是受到限制的, 这个可以理解.

continuous.tickFormat([count, [specifier]])

tickFormat 几乎是一个刻度 formatter, 或者说刻度 mapper. 具体用法如下:

let sl = d3.scaleLinear()
  .domain([0, 300])
  .range([0, 66]);

let ticks = sl.ticks(7),
  tickFormat = sl.tickFormat(7, "+%")

let res = ticks.map(tickFormat)

console.log(ticks); // [0, 50, 100, 150, 200, 250, 300]
console.log(res); // ["+0%", "+5000%", "+10000%", "+15000%", "+20000%", "+25000%", "+30000%"]

ticks.map(formatter) 实际上 ticks 就是一个数组, map 方法就是数组的 map 方法, formatter 函数传入 map 方法后被作为映射器使用.

continuous.nice([count])

nice() 方法用来优化 domain 的 max & min 值, 通常会修改为其最接近的整数值, 不会修改中间值.

let sl = d3.scaleLinear()
  .domain([0.1, 2.123245, 3.748392])
  .range([0, 66]);

console.log(sl.domain()); // [0.1, 2.123245, 3.748392]
sl.nice();
console.log(sl.domain()); // [0, 2.123245, 4]

continuous.copy()

返回当前比例尺的深复制.

小结

看了这么多内容不能忘记最初的目的.

比例尺的作用就是用合适的比例将使用像素作为尺寸展示不友好的数据进行缩放.

这里有一个使用了比例尺的 demo:

61.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <style>
    svg,
    .container {
      box-sizing: border-box;
      padding: 8px;
      border-radius: 3px;
      border: 1px solid #ddd;
    }

    svg {
      background-color: #f1f1f1;
    }

    .container {
      background-color: #fff;
    }
  </style>
  <div class="container"></div>
  <script src="https://d3js.org/d3.v5.min.js"></script>

  <script>
    let width = '100%',
      height = 256,
      barHeight = 16;

    let dataset = new Array(15);

    for (let i = 0; i < dataset.length; i++) {
      dataset[i] = Math.random() * 100;
    }

    let domainMax = Math.max(...dataset),
      domainMin = Math.min(...dataset),
      rangeMax = 500,
      rangeMin = 10;


    console.log(domainMin, domainMax);
    console.log(rangeMin, rangeMax);
    let sl = d3.scaleLinear()
      .domain([domainMin, domainMax])
      .range([rangeMin, rangeMax]);

    let svg = d3.select('.container').append('svg');

    svg.attr('width', width)
      .attr('height', height);

    let rectes = svg.selectAll('rect')
      .data(dataset)
      .enter()
      .append('rect');

    rectes
      .attr('y', (item, idx) => idx * barHeight)
      .attr('width', item => sl(item))
      .attr('height', barHeight - 4)
      .attr('ry', '2px')
      .attr('fill-opacity', 0.85)
      .attr('fill', '#369')

    let title = svg.selectAll('text')
      .data(dataset)
      .enter()
      .append('text');

    title.attr('x', item => sl(item) + 4)
      .attr('y', (_, idx) => (idx + 1) * barHeight - 6)
      .attr('font-size', '0.75em')
      .text(item => item)
  </script>
</body>

</html>

可以多次刷新查看变化.

---

1. continuous.invert() ↩

2. continuous.clamp() ↩