D3 比例尺小记

线性比例尺 d3.scaleLinear

最常用的比例尺 : d3.scaleLinear , 线性比例尺:

1
2
3
4
5
6
var fn = d3.scaleLinear()
.domain([10, 130])
.range([0, 960]);

fn(20); // 80
fn(50); // 320

这里的 scaleLinear 方法创建了一个函数。 将[10, 130] 的空间 投射到 [0, 960] 的一个函数:

[ 10 , 130 ] => [ 0 , 960 ] ,用数学的写法就是:

$$
f(x) = y , x \in [10 , 130] , y \in [0 , 960]
$$

比例尺的作用就是创建一个映射函数,在实际写代码的过程中,是很有作用的。除了线性比例尺外,d3 内置了十几种比例尺,可以满足各种不场景的需求。

阅读更多