上一章介紹了指數比例尺和對數比例尺:https://www.cnblogs.com/littleSpill/p/10822574.html 現在給大家介紹一下量子比例尺和分位比例尺。 量子比例尺(Quantize Scale)的定義域是連續的，值域是離散的，根據輸入的值不同，結果是其對應的離散值。例 ...
上一章介紹了指數比例尺和對數比例尺: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()可以查詢分位比例尺的分段值. 下一章介紹閾值比例尺。
