d3.js: 比例尺Scale

当数据集里的元素为数字时，由于数字可大可小，我们不可能用像素去表示它们的大小的，这时候就需要用到比例尺了，相当于我们学过的y=kx这样的关系，数据集里的数据映射到比例尺里对应的数值，就有的定义域（输入）和值域（输出）

接下来用2个例子说明：

线性比例尺

let dataset = [12, 11, 13]
let scaleLinear = 
    d3.scaleLinear().domain([0, d3.max(this.dataset)]).range([0, 250]) // 线性
    console.log(scaleLinear(12)) // 230.76923076923077

 

序数比例尺

let dataset = [12, 11, 13]
let dataColor = ['#212', '#122', '234']
let scaleOrdinal = d3.scaleOrdinal().domain(this.dataset).range(this.dataColor)
scaleOrdinal(12) // #212

看到了吗？定义一个比例尺的基本操作是用d3指定比例尺的类型，定义域(domain)和值域(range)，其中，线性的定义域和值域都传入一组数组，我们的数据集一般作为定义域，且用到d3.max查找出它的最大值，序数的定义域和值域都传入我们的数据集。

还有其他类型的比例尺以及比例尺的其他设置，可参考https://github.com/d3/d3/blob/master/API.md#scales-d3-scale