D3.js比例尺 定量比例尺 之 阈值比例尺(v3版本)
程序员文章站
2022-05-03 11:51:43
上一章介绍了量子比例尺和分位比例尺: https://www.cnblogs.com/littleSpill/p/10823376.html 现在给大家简单介绍一下阈值比例尺。 阈值比例尺(Threshold Scale) 阈值(Threshold)又叫临界值,是指一个效应能够产生的最低值或最高值。 ......
上一章介绍了量子比例尺和分位比例尺: https://www.cnblogs.com/littlespill/p/10823376.html
现在给大家简单介绍一下阈值比例尺。
阈值比例尺(threshold scale)
阈值(threshold)又叫临界值,是指一个效应能够产生的最低值或最高值。阈值比例尺(threshold scale)是通过设定阈值。将连续的定义域映射到离散的值域里,与量子比例尺和分位比例尺相似,举个例子:
1 var threshold = d3.scale.threshold() 2 .domain([10,20,30]) 3 .range(["red","green","blue","black"]) 4 5 console.log(threshold(5)) //返回值red 6 console.log(threshold(15)) //返回值green 7 console.log(threshold(25)) //返回值blue 8 console.log(threshold(35)) //返回值black
这段代码的阈值比例尺定义了三个阈值:10,20,30。则空间被这三个阈值分位4段,分别为:负无穷到10、 10到20、 20到30、 30到正无穷。值域设定了四个离散的值,则定义域的四段分别对应到这四个值上。因此,最终的输出结果分别为red,green,blue,black。阈值比例尺可以使用invertextent()通过值域求定义域。看代码:
1 console.log(threshold.invertextent("red")) //返回值[undefined, 10] 2 console.log(threshold.invertextent("green")) //返回值[10, 20] 3 console.log(threshold.invertextent("blue")) //返回值[20, 30] 4 console.log(threshold.invertextent("black")) //返回值[30, undefined]
阈值比例尺、量子比例尺、分位比例尺,三者十分相似。都是将连续的定义域映射到离散的值域里,开发者要根据需求需求选择使用。
下一章给大家介绍序数比例尺。
推荐阅读
-
D3.js(v3)+react 制作 一个带坐标轴与比例尺的折线图
-
D3.js比例尺 定量比例尺 之 阈值比例尺(v3版本)
-
D3.js比例尺 序数比例尺(v3版本)
-
D3.js坐标轴的绘制方法、添加坐标轴的刻度和各比例尺的坐标轴(V3版本)
-
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
-
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
-
D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本)
-
D3.js(v3)+react 制作 一个带坐标轴与比例尺的折线图
-
D3.js比例尺 序数比例尺(v3版本)
-
D3.js比例尺 定量比例尺 之 阈值比例尺(v3版本)