【D3.js 学习总结】17、D3布局-分区图（矩形）

d3.layout.partition()

分区图可以展示为方形或者圆形，从原理上来说它是树状结构的一种可视化展现形式，表示包含与被包含的关系；

分区图(Partition)的API说明

• partition.children - 取得或设置孩子访问器。
• partition.links - 计算树节点中的父子链接。
• partition.nodes - 计算分区布局并返回节点数组。
• partition.size - 指定布局的尺寸。
• partition.sort - 控制兄弟节点的遍历顺序。
• partition.value - 取得或设置用来指定圆尺寸的值访问器。
• partition - partition.nodes的别名。

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 partition = d3.layout.partition()
                .sort(null) //设定内部的顶点的排序函数，null 表示不排序
                .size([width,height]) //设定转换后图形的范围
                .value(function(d) { return d.gdp; }); //设定表示分区大小的值

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

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

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

x: 顶点的 x 坐标位置
y: 顶点的 y 坐标位置
dx: 顶点的宽度 dx
dy: 顶点的高度 dy

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

3、绘制图形

生成SVG容器

var svg = d3.select('body').append('svg')
    .attr('width',width)
    .attr('height',height)

生成颜色比例尺

var color = d3.scale.category10();

为节点数据创建容器

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

为节点数据创建矩形图

    rects.append("rect")
        .attr("x", function(d) { return d.x; })    // 顶点的 x 坐标
        .attr("y", function(d) { return d.y; })    // 顶点的 y 坐标
        .attr("width", function(d) { return d.dx; })  // 顶点的宽度 dx
        .attr("height", function(d) { return d.dy; })  //顶点的高度 dy
        .style("stroke", "#fff")
        .style("fill", function(d) { return color(d.name); })

生成文本

    rects.append("text")
        .attr("transform",function(d,i){
            return "translate(" + (d.x+5) + "," + (d.y+5) + ") rotate(90) ";
        })
        .text(function(d,i) {
            return d.name;
        });

查看在线演示