d3中常见比例尺

该文章由 leevare 发布于 ,归类于 Javascript

连续型比例尺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(),颜色比例尺等,详细参见官方文档

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒