上一章介绍了指数比例尺和对数比例尺:https://www.cnblogs.com/littleSpill/p/10822574.html
现在给大家介绍一下量子比例尺和分位比例尺。
量子比例尺(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()可以查询分位比例尺的分段值.
下一章介绍阈值比例尺。
扫描二维码关注公众号，回复：
6146212 查看本文章
