d3中常见比例尺

连续型比例尺d3.scaleLinear()

使用d3.scaleLinear()创建一个连续型的比例尺，向domain中提供一个数组，会在range中得到相应的映射值。

const scale1 = d3
    .scaleLinear()
    .domain([10, 130])
    .range([0, 960]);

console.log(scale1(30)); //160
console.log(scale1(50)); //320

如果scale1传一个超出domain范围的值，会输出什么？

scale1(500)结果输出3919.9999999999995，可见，该比例尺并不限制你传递的值是否在domain数组范围内，它都会帮你做转换。

序数段比例尺d3.scaleBand()

domain为一个数组，range是一个连续的域

const scale1 = d3
    .scaleBand()
    .domain([1, 2, 3, 4])
    .range([0, 960]);

console.log(scale1(1)); // 0
console.log(scale1(2)); // 240
console.log(scale1(50)); // undefined

可看到，如果在此处传递domain数组中不存在的值将会返回undefined。

序数比例尺d3.scaleOrdinal()

该比例尺中，domain中的值和range中的值是一一对应的，可以看作是离散数据。

const scale1 = d3
    .scaleOrdinal()
    .domain([1, 2, 3, 4])
    .range([0, 960, 6, 10]);

console.log(scale1(2)); //960
console.log(scale1(3)); //6

但是，如果输入不相关值的时候，它也能返回值，例如

console.log(scale1(20)); //0

所以，在传递值的时候要确保值的正确性。

量化比例尺d3.scaleQuantize()

domain中属于连续的值，而range中属于离散的值。

const scale1 = d3
    .scaleQuantize()
    .domain([0, 1])
    .range(["brown", "steelblue"]);

console.log(scale1(1)); //steelblue
console.log(scale1(0.2)); //brown

通过计算给定值，返回在range中的映射位置。

最后，还有时间比例尺d3.scaleTime()，颜色比例尺等，详细参见官方文档。