D3.js比例尺 定量比例尺 之 量子比例尺和分位比例尺(v3版本)
上一章介绍了指数比例尺和对数比例尺:https://www.cnblogs.com/littleSpill/p/10822574.html
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。
现在给大家介绍一下量子比例尺和分位比例尺。
量子比例尺(Quantize Scale)的定义域是连续的，值域是离散的，根据输入的值不同，结果是其对应的离散值。例如: 定义域:[0,10] 值域 :["red","green","blue","yellow","black"] 使用量子比例尺后，定义域将被分割成5段，每一段对应值域的一个值。[0,2)对应red，[2,4)对应"green"以此类推，看代码:
1 var quantize = d3.scale.quantize() 2 .domain([0,10]) 3 .range(["red","green","blue","yellow","black"]); 4
5 console.log(quantize(1)) //red
6 console.log(quantize(3)) //green
7 console.log(quantize(5.999)) //blue
8 console.log(quantize(6)) //yellow
因此，量子比例尺很适合处理类似"数值对应颜色"的问题。例如要表示中国各省份的GDP，数值越大，就用越深的颜色来表示。 此时，可以使用量子比例尺。接下来，带大家做一个图，图中有几个圆，圆的半径越小，颜色越深。 代码:
1 //定义量子化比例尺
2 var quantize2 = d3.scale.quantize() 3 .domain([50,0]) 4 .range(["#999","#666","#444","#222","#000"]); 5 //定义圆的半径
6 var r = [45,35,25,15,5] 7 //给id为body的div中添加一个svg元素
8 var svg = d3.select("#body") 9 .append("svg") 10 .attr("width",500) 11 .attr("height",500) 12 //给svg里添加圆
13 svg.selectAll("circle") 14 .data(r) 15 .enter() 16 .append("circle") 17 .attr("cx",function(d,i){return 50 + i*100}) 18 .attr("cy",50) 19 .attr("r",function(d){return d}) 20 .attr("fill",function(d){return quantize2(d)})
效果图 ：
如图所示:绘制了五个圆，颜色分别为"#999","#666","#444","#222","#000"。
分位比例尺(Quantile Scale)与量子比例尺十分类似，也是用于将连续的定义域区域分成段，每一段对应到
一个离散的值上。下面通过一段代码来看看它们的不同之处:
1 //量子比例尺
2 var quantize3 = d3.scale.quantize() 3 .domain([0,2,4,10]) 4 .range([1,100]) 5 //分位比例尺
6 var quanTile = d3.scale.quantile() 7 .domain([0,2,4,10]) 8 .range([1,100]) 9 console.log(quantize3(3)) //返回值1
10 console.log(quanTile(3)) //返回值100
这段代码中，两个比例尺的定义域和值域都是一样的，同样输入3，但是一个对应到离散值1上，另一个对应到100上。这是两者的分段位置不同导致的。量子比例尺的分段值为5，而分位比例尺的分段值为3。
1 console.log(quantize3(4.99)) //返回值1 2 console.log(quantize3(5)) //返回值100 3 4 console.log(quanTile(2.99)) //返回值1 5 console.log(quanTile(3)) //返回值100
从此处可看出，两者的分段处的值是不同的。量子比例尺的分段值只与定义域的起始值和结束值有关，其中间有多少其他数值都没有影响，分段值取其算数平均值。而分位比例尺的分段值域定义域中存在的数值都有关。使用quantile.quantiles()可以查询分位比例尺的分段值. 下一章介绍阈值比例尺。
更多精彩
