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 中的代码: