分区图
最后更新于：2022-04-01 20:04:32
分区图（ Partition ），也是 D3 的一个布局（ Layout ）。这个布局很有意思，可以做成方形也可能做成圆形，本文先介绍方形分区图的制作方法，这也是分区图最基本的形式。
[](http://www.ourd3js.com/wordpress/wp-content/uploads/2014/11/301.png)
分区图也是用于表示包含与被包含关系的。
## 1. 数据
本文使用【[入门 - 第 9.4 章](http://www.ourd3js.com/wordpress/?p=254)】的数据，内容为中国境内几个城市的所属关系。
## 2. 布局（数据转换）
~~~
var partition = d3.layout.partition()
.sort(null)
.size([width,height])
.value(function(d) { return 1; });
~~~
第 1 行：分区图的布局。
第 2 行：sort 设定内部的顶点的排序函数，null 表示不排序。
第 3 行：size 设定转换后图形的范围，这个值很重要，运用得当可变为圆形分区图。
第 4 行：value 设定表示分区大小的值。这里的意思是：如果数据文件中用 size 值表示结点大小，那么这里可写成 return d.size。
接下来读取并转换数据，代码如下：
~~~
d3.json("city_tree.json", function(error, root) {
if(error)
console.log(error);
console.log(root);
//转换数据
var nodes = partition.nodes(root);
var links = partition.nodes(nodes);
//输出转换后的顶点
console.log(nodes);
}
~~~
来看看转换后的数据为何：
[](http://www.ourd3js.com/wordpress/wp-content/uploads/2014/11/302.png)
顶点中增加了几个变量，其中：
- x: 顶点的 x 坐标位置
- y: 顶点的 y 坐标位置
- dx: 顶点的宽度 dx
- dy: 顶点的高度 dy
## 3. 绘制
绑定顶点数据，分别绘制矩形和文字，代码如下：
~~~
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.children ? d : d.parent).name); })
.on("mouseover",function(d){
d3.select(this)
.style("fill","yellow");
})
.on("mouseout",function(d){
d3.select(this)
.transition()
.duration(200)
.style("fill", function(d) {
return color((d.children ? d : d.parent).name);
});
});
rects.append("text")
.attr("class","node_text")
.attr("transform",function(d,i){
return "translate(" + (d.x+20) + "," + (d.y+20) + ")";
})
.text(function(d,i) {
return d.name;
});
~~~
注意上面的注释处，好好体会转换后的数据是怎么运用的。
## 4. 结果
完整代码，请点击下面的链接，再右键点击查看源代码：
[http://www.ourd3js.com/demo/J-3.0/rect_partition.html](http://www.ourd3js.com/demo/J-3.0/rect_partition.html)
### 文档信息
- 版权声明：署名（BY）-非商业性（NC）-禁止演绎（ND）
- 发表日期：2014 年 11 月 23 日
- 更多内容：[OUR D3.JS - 数据可视化专题站](http://www.ourd3js.com/) 和 [CSDN个人博客](http://blog.csdn.net/lzhlzz)
- 备注：本文发表于 [OUR D3.JS](http://www.ourd3js.com/) ，转载请注明出处，谢谢
';