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: 顶点的宽度 dxdy: 顶点的高度 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; });

查看在线演示

相关资源：java统计代码行数生成json文件 D3.js绘制树图（矩形分区图、圆状集群图、矩阵树图） 实验报告