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;        });