D3.js比例尺 定量比例尺 之 量子比例尺和分位比例尺(v3版本)

发布时间:2019-05-07 14:00:09发布者:Mr.Zhang阅读(447)

上一章介绍了指数比例尺和对数比例尺: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()可以查询分位比例尺的分段值.
 
下一章介绍阈值比例尺。

 





本文转自博客园,原文地址:https://www.cnblogs.com/littleSpill/p/10823376.html