【 D3.js 入门系列 --- 9.1 】饼状图的制作

最新推荐文章于 2021-06-27 10:51:41 发布

phillip318

最新推荐文章于 2021-06-27 10:51:41 发布

阅读量303

点赞数

本人的个人博客为： www.ourd3js.com

csdn博客为： blog.csdn.net/lzhlzz

转载请注明出处，谢谢。

这一节用 Layout 做一个饼状图。第9节中说过， Layout 的作用只是转换数据，将不适合图形化的数据转化成适合图形化的数据。现在使用以下数据：

[javascript]view plaincopy 
   
 var dataset = [ 30 , 10 , 43 , 55 , 13 ];  

这个数据要不能直接用于画饼状图，我们必须通过计算将它转换成角度。这个计算不需要我们手动计算，因为 D3 中提供了 d3.layout.pie() 函数，这个 Layout 就是用于将上面这样的数据转换成饼状图需要的角度。下面定义一个这样的函数。

[javascript]view plaincopy 
   
 var pie = d3.layout.pie();  

一定要记住，这是一个函数，使用它的时候，要 pie( dataset ) 这样才转换数据。我们可以先看看转换后输出什么样的数据。

如上图所示，5个整数被转换成了5个 Object ，每个里面存有起始角度和结束角度，以及原整数。这样的数据适合做饼状图，这就是 Layout 的作用。但是要注意，实际作图时，还是需要别的作图方法的。

我们可用做弧线的方法来作饼状图，因为弧线有粗细，调整粗细就能变成饼状图，下面我们添加如下代码：

[javascript]view plaincopy 
   
 var outerRadius = width / 2;  
         var innerRadius = width / 4;  
         var arc = d3.svg.arc()  
                         .innerRadius(innerRadius)  
                         .outerRadius(outerRadius);  

outerRadius 和 innerRadius 是弧线的外半径和内半径，width 是 svg 绘制框的宽度， outerRadius - innerRadius 就是弧线的粗细。然后我们定义一个弧线的函数 arc ，并把内外半径传给它。要注意 arc 也是一个函数。
接下来可以作图了，和前几节一样，都是在 svg 框内作图。上面的有5个整数，也就是有5段弧线。我们先在 svg 里添加5个分组（也就是 svg 中的元素 g ）。每一个分组就是一段弧线。代码如下：

[javascript]view plaincopy 
   
 var arcs = svg.selectAll("g")  
               .data(pie(dataset))  
               .enter()  
               .append("g")  
               .attr("transform","translate("+outerRadius+","+outerRadius+")");  

上面的代码中，我们绑定了转换后的数据 pie(dataset) ，有5个数据，所以会添加5个g元素，最后一行代码是移动元素的位置，默认的起始位置是 svg 绘制框的 (0,0) 坐标，也就是左上角。要注意，这个时候上面代码返回的是同时选择5个g元素的选择。

接下来对每个g元素，添加 path 。

[javascript]view plaincopy 
   
 arcs.append("path")  
     .attr("fill",function(d,i){  
         return color(i);  
     })  
     .attr("d",function(d){  
         return arc(d);  
     });  

因为 arcs 是同时选择5个g元素的，所以 append("pah") 后，是每一个 g 中都有 path ，然后再添加颜色属性，和路径属性。颜色属性的 color(i) 是定义的一个函数。

[javascript]view plaincopy 
   
 var color = d3.scale.category10();  

SVG 中的路径属性是 d，它的值是 arc(d) ，也就是将绑定的数据作为上面定义的函数 arc 的参数算出的值。

接下来在每一个弧线中心添加文本。

[javascript]view plaincopy 
   
 arcs.append("text")  
     .attr("transform",function(d){  
         return "translate(" + arc.centroid(d) + ")";  
     })  
     .attr("text-anchor","middle")  
     .text(function(d){  
         return d.value;  
     });  

arc.centroid(d) 能算出弧线的中心，要注意一句代码，返回的是 d.value ，而不是 d，因为当前绑定的数据是 Object，里面有起始角度等值，d.value 是元整数的值，可见上面的截图。

好了，看看结果图吧。

完整代码如下：

[javascript]view plaincopy 
   
 <html>    
   <head>    
         <meta charset="utf-8">    
         <title>Pie</title>    
   </head>   
   
 <style>  
   
   
 </style>  
     <body>    
         <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>    
         <script>  
           
         var width = 600;  
         var height = 600;  
         var dataset = [ 30 , 10 , 43 , 55 , 13 ];  
           
         var svg = d3.select("body").append("svg")  
                                 .attr("width",width)  
                                 .attr("height",height);  
           
         var pie = d3.layout.pie();  
           
         var outerRadius = width / 2;  
         var innerRadius = width / 4;  
         var arc = d3.svg.arc()  
                         .innerRadius(innerRadius)  
                         .outerRadius(outerRadius);  
           
         var color = d3.scale.category10();  
           
         var arcs = svg.selectAll("g")  
                       .data(pie(dataset))  
                       .enter()  
                       .append("g")  
                       .attr("transform","translate("+outerRadius+","+outerRadius+")");  
                         
         arcs.append("path")  
             .attr("fill",function(d,i){  
                 return color(i);  
             })  
             .attr("d",function(d){  
                 return arc(d);  
             });  
           
         arcs.append("text")  
             .attr("transform",function(d){  
                 return "translate(" + arc.centroid(d) + ")";  
             })  
             .attr("text-anchor","middle")  
             .text(function(d){  
                 return d.value;  
             });  
           
         console.log(dataset);  
         console.log(pie(dataset));  
             
         </script>    
           
     </body>    
 </html>    
 
   
 
 
  
  
 

phillip318

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【 D3.js 入门系列 --- 9.1 】饼状图的制作

本人的个人博客为： www.ourd3js.com csdn博客为： blog.csdn.net/lzhlzz 转载请注明出处，谢谢。这一节用 Layout 做一个饼状图。第9节中说过， Layout 的作用只是转换数据，将不适合图形化的数据转化成适合图形化的数据。现在使用以下数据：[javascript] view
复制链接

扫一扫