【D3.js数据可视化系列教程】（二十三）--饼图圆环图

最新推荐文章于 2023-03-13 11:53:06 发布

骚φ(゜▽゜*)♪白

最新推荐文章于 2023-03-13 11:53:06 发布

阅读量731

点赞数

分类专栏： D3.JS

原文链接：https://blog.csdn.net/zhang__tianxu/article/details/14103477

版权

D3.JS 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

本文链接： https://blog.csdn.net/zhang__tianxu/article/details/14103477

饼图	圆环图

1. 饼布局

转化数据为适合生成饼图的对象数组

var pie = d3.layout.pie(dataset);

2. 绘制弧形

用svg的path绘制弧形的内置方法


    
    
      
      
       
       
      
      
      
      
       
       
        
        var arc = d3.svg.arc()
        
        //设置弧度的内外径，等待传入的数据生成弧度
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
          .outerRadius(outerRadius)
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
          .innerRadius(innerRadius);

3. 颜色

var color = d3.scale.category10();//创建序数比例尺和包括10中颜色的输出范围

4. 弧分组

准备分组,把每个分组移到图表中心


    
    
      
      
       
       
      
      
      
      
       
       
        
        var arcs = svg.selectAll(
        
        "g.arc")
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
          .data(pie(dataset))
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
          .enter()
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
          .
        
        append(
        
        "g")
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
          .attr(
        
        "class",
        
        "arc")
       
       
      
      

      
      
       
       
      
      
      
      
       
         
        
        //移到图表中心
       
       
      
      

      
      
       
       
      
      
      
      
       
         
        
        //translate(a,b)a表示横向平移距离，b表示纵向平移距离
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
          .attr(
        
        "transform",
        
        "translate("+outerRadius+
        
        ","+outerRadius+
        
        ")");

5. 添加弧路径

为组中每个元素绘制弧形路路径


   
   
     
     
      
      
     
     
     
     
      
      
       
       arcs.append(
       
       "path")
       
       //每个g元素都追加一个path元素用绑定到这个g的数据d生成路径信息
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
           .attr(
       
       "fill",
       
       function(d,i){
       
       //填充颜色
      
      
     
     

     
     
      
      
     
     
     
     
      
              
       
       return color(i);
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
           })
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
           .attr(
       
       "d",arc);
       
       //将角度转为弧度（d3使用弧度绘制）

6. 添加文字

为组中每个元素添加文本


    
    
      
      
       
       
      
      
      
      
       
       
        
        arcs.append(
        
        "text")
        
        //每个g元素都追加一个path元素用绑定到这个g的数据d生成路径信息
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
            .attr(
        
        "transform",
        
        function(d){ 
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        return 
        
        "translate("+arc.centroid(d)+
        
        ")";
        
        //计算每个弧形的中心点（几何中心）
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
            })
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
            .attr(
        
        "text-anchor",
        
        "middle")
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
            .text(
        
        function(d){
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        return d.value;
        
        //这里已经转为对象了
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
            });

7. 圆环

通过设置内半径生成圆环

var innerRadius = w/3;

8 完整代码


    
    
      
      
       
       
      
      
      
      
       
       
        
        <!DOCTYPE html>
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        <html>
       
       
      
      

      
      
       
       
      
      
      
      
       
         
        
        <head>
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        <meta charset="utf-8">
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        <title>testD3-20-pie.html
        
        </title>
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        <script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js">
        
        
        
        </script>
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        <style type="text/css">
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        </style>
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        </head>
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        <body>
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        <script type="text/javascript">
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        var
        
         dataset=[
        
        5
        
        ,
        
        10
        
        ,
        
        20
        
        ,
        
        40
        
        ,
        
        6
        
        ,
        
        25
        
        ];
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        //(1)转化数据为适合生成饼图的对象数组
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        var
        
         pie=d3.layout.pie(dataset);
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        var
        
         h=
        
        300
        
        ;
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        var
        
         w=
        
        300
        
        ;
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        var
        
         outerRadius=w/
        
        2
        
        ;
        
        //外半径
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        //(7)圆环内半径
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        var
        
         innerRadius=w/
        
        3
        
        ;
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        //(2)用svg的path绘制弧形的内置方法
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        var
        
         arc=d3.svg.arc()
        
        //设置弧度的内外径，等待传入的数据生成弧度
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                    .outerRadius(outerRadius)
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                    .innerRadius(innerRadius);
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        var
        
         svg=d3.select(
        
        "body"
        
        )
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                        .append(
        
        "svg"
        
        )
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                        .attr(
        
        "width"
        
        ,w)
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                        .attr(
        
        "height"
        
        ,h);
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        //(3)颜色函数
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        var
        
         color=d3.scale.category10();
        
        //创建序数比例尺和包括10中颜色的输出范围
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        //(4)准备分组,把每个分组移到图表中心
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        var
        
         arcs=svg.selectAll(
        
        "g.arc"
        
        )
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                    .data(pie(dataset))
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                    .enter()
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                    .append(
        
        "g"
        
        )
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                    .attr(
        
        "class"
        
        ,
        
        "arc"
        
        )
       
       
      
      

      
      
       
       
      
      
      
      
       
                   
        
        //移到图表中心
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                    .attr(
        
        "transform"
        
        ,
        
        "translate("
        
        +outerRadius+
        
        ","
        
        +outerRadius+
        
        ")"
        
        );
        
        //translate(a,b)a表示横坐标起点，b表示纵坐标起点
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        //(5)为组中每个元素绘制弧形路路径
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                arcs.append(
        
        "path"
        
        )
        
        //每个g元素都追加一个path元素用绑定到这个g的数据d生成路径信息
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                    .attr(
        
        "fill"
        
        ,
        
        function(d,i)
        
        {
        
        //填充颜色
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
                       
        
        return
        
         color(i);
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                    })
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                    .attr(
        
        "d"
        
        ,arc);
        
        //将角度转为弧度（d3使用弧度绘制）
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        //(6)为组中每个元素添加文本
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                arcs.append(
        
        "text"
        
        )
        
        //每个g元素都追加一个path元素用绑定到这个g的数据d生成路径信息
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                    .attr(
        
        "transform"
        
        ,
        
        function(d)
        
        { 
       
       
      
      

      
      
       
       
      
      
      
      
       
                       
        
        return
        
         
        
        "translate("
        
        +arc.centroid(d)+
        
        ")"
        
        ;
        
        //计算每个弧形的中心点（几何中心）
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                    })
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                    .attr(
        
        "text-anchor"
        
        ,
        
        "middle"
        
        )
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                    .text(
        
        function(d)
        
        {
       
       
      
      

      
      
       
       
      
      
      
      
       
                       
        
        return
        
         d.value;
        
        //这里已经转为对象了
        
        
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
                    });
       
       
      
      

      
      
       
       
      
      
      
      
       
               
        
        </script>
       
       
      
      

      
      
       
       
      
      
      
      
       
        
       
       
      
      

      
      
       
       
      
      
      
      
       
           
        
        </body>
       
       
      
      

      
      
       
       
      
      
      
      
       
       
        
        </html>