分區圖（ 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/) ，轉載請注明出處，謝謝
