首页 > > 网页制作 > Javascript >

D3.js比例尺定量比例尺之量子比例尺和分位比…

2019-05-08 07:27:53来源：博客园阅读 ()

上一章介绍了指数比例尺和对数比例尺: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