d3.layout.partition()

上节中展示的是基本的方形分区图，这节我们要做一个圆形的分区图，圆形图跟方形图基本相同，只有布局函数的 size 函数和绘制图形的部分稍有区别；

1、数据

    var dataset = {
      "name": "中国",
      "children":
          [
            {
              "name": "浙江",
              "children":
                  [
                    {"name":"嘉兴", "gdp":3147},
                    {"name":"金华", "gdp":2958},
                    {"name":"衢州", "gdp":1056}
                  ]
            },
            {
              "name": "广东",
              "children":
                  [
                    {"name":"杭州", "gdp":8343},
                    {"name":"绍兴", "gdp":3620},
                    {"name":"湖州", "gdp":1803}
                  ]
            },
            {
              "name": "福建",
              "children":
                  [
                    {"name":"舟山", "gdp":1021},
                    {"name":"台州", "gdp":3153},
                    {"name":"丽水", "gdp":983}
                  ]
            }
          ]
    }

2、数据转换

    var width = 500;
    var height = 500;
    var radius =  Math.min(width, height) / 2

    var partition = d3.layout.partition()
                .sort(null) //设定内部的顶点的排序函数，null 表示不排序
                 .size([2 * Math.PI, radius * radius]) //第一个值为 2 * PI ，第二个值为圆半径的平方，暂时不去深究为什么这么做，只需记得这么用即可
                .value(function(d) { return d.gdp; }); //设定表示分区大小的值

    var nodes = partition.nodes(dataset);
    var links = partition.links(nodes);

转换数据后，节点数组的输出结果如图所示。

其中，节点对象的属性包括：

x: 绕圆心方向的起始位置
y: 由圆心向外方向的结束位置
dx: 起始位置宽度
dy: 结束位置宽度

本例中将不会用到liks数据对象；

3、绘制图形

生成SVG容器

    var svg = d3.select('body').append('svg')
      .attr('class','axis')
      .attr('width',width)
      .attr('height',height)
      .append('g')
      .attr("transform", "translate(" + radius + "," + radius + ")");

生成颜色比例尺

var color = d3.scale.category20();

创建圆弧SVG生成器

    var arc = d3.svg.arc()
            .startAngle(function(d) { return d.x; })
            .endAngle(function(d) { return d.x + d.dx; })
            .innerRadius(function(d) { return Math.sqrt(d.y); })
            .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

为节点数据创建容器

    var arcs = svg.selectAll("g")
                  .data(nodes)
                  .enter().append("g");

为节点数据创建圆弧路径

    arcs.append("path")
        .attr("d", arc)
        .style("stroke", "#fff")
        .style("fill", function(d) { return color(d.name); })

生成文本

    arcs.append("text")
        .attr("text-anchor","middle")
        .attr("transform",function(d,i){
                //第一个元素不动
                if( i == 0 ) return ;

                //其它的平移
                return  "translate(" + arc.centroid(d) + ")"
        })
        .text(function(d) { return d.name; });

查看在线演示