布局，可以理解成 “制作常見圖形的函數(shù)”，有了它制作各種相對復(fù)雜的圖表就方便多了。

http://wiki.jikexueyuan.com/project/d3wiki/images/layout-1.png" alt="布局" />

布局是什么

布局，英文是 Layout。從字面看，可以想到有“決定什么元素繪制在哪里”的意思。布局是 D3 中一個十分重要的概念。D3 與其它很多可視化工具不同，相對來說較底層，對初學(xué)者來說不太方便，但是一旦掌握了，就比其他工具更加得心應(yīng)手。下圖展示了 D3 與其它可視化工具的區(qū)別：

http://wiki.jikexueyuan.com/project/d3wiki/images/layout-2.png" alt="D3和其他工具" />

可以看到，D3 的步驟相對來說較多。壞處是對初學(xué)者不方便、也不好理解。好處是能夠制作出更加精密的圖形。因此，我們可以據(jù)此定義什么時候選擇 D3 比較好：

• 選擇 D3：如果希望開發(fā)腦海中任意想象到的圖表。
• 選擇 Highcharts、Echarts 等：如果希望開發(fā)幾種固定種類的、十分大眾化的圖表。

看起來，D3 似乎是為藝術(shù)家或發(fā)燒友準(zhǔn)備的。有那么點(diǎn)意思，但請初學(xué)者也不要放棄。

如何理解布局

從上面的圖可以看到，布局的作用是：將不適合用于繪圖的數(shù)據(jù)轉(zhuǎn)換成了適合用于繪圖的數(shù)據(jù)。

因此，為了便于初學(xué)者理解，本站的教程叫布局的作用解釋成：數(shù)據(jù)轉(zhuǎn)換。

布局有哪些

D3 總共提供了 12 個布局：餅狀圖（Pie）、力導(dǎo)向圖（Force）、弦圖（Chord）、樹狀圖（Tree）、集群圖（Cluster）、捆圖（Bundle）、打包圖（Pack）、直方圖（Histogram）、分區(qū)圖（Partition）、堆棧圖（Stack）、矩陣樹圖（Treemap）、層級圖（Hierarchy）。

12 個布局中，層級圖（Hierarchy）不能直接使用。集群圖、打包圖、分區(qū)圖、樹狀圖、矩陣樹圖是由層級圖擴(kuò)展來的。如此一來，能夠使用的布局是 11 個（有 5 個是由層級圖擴(kuò)展而來）。這些布局的作用都是將某種數(shù)據(jù)轉(zhuǎn)換成另一種數(shù)據(jù)，而轉(zhuǎn)換后的數(shù)據(jù)是利于可視化的。

Bundle —- 捆圖

http://wiki.jikexueyuan.com/project/d3wiki/images/layout-bundle.png" alt="捆圖" />

Chord —- 弦圖

http://wiki.jikexueyuan.com/project/d3wiki/images/layout-chord.png" alt="弦圖" />

Cluster —- 集群圖

http://wiki.jikexueyuan.com/project/d3wiki/images/layout-cluster.png" alt="集群圖" />

Force —- 力學(xué)圖、力導(dǎo)向圖

http://wiki.jikexueyuan.com/project/d3wiki/images/layout-force.png" alt="力學(xué)圖、力導(dǎo)向圖" />

Histogram —- 直方圖（數(shù)據(jù)分布圖）

http://wiki.jikexueyuan.com/project/d3wiki/images/layout-histogram.png" alt="直方圖（數(shù)據(jù)分布圖）" />

Pack —- 打包圖

http://wiki.jikexueyuan.com/project/d3wiki/images/layout-pack.png" alt="打包圖" />

Partition —- 分區(qū)圖

http://wiki.jikexueyuan.com/project/d3wiki/images/layout-partition.png" alt="分區(qū)圖" />

Pie —- 餅狀圖

http://wiki.jikexueyuan.com/project/d3wiki/images/layout-pie.png" alt="餅狀圖" />

Stack —- 堆棧圖

http://wiki.jikexueyuan.com/project/d3wiki/images/layout-stack.png" alt="堆棧圖" />

Tree —- 樹狀圖

http://wiki.jikexueyuan.com/project/d3wiki/images/layout-diagonal.png" alt="樹狀圖" />

Treemap —- 矩陣樹圖

http://wiki.jikexueyuan.com/project/d3wiki/images/layout-treemap.png" alt="矩陣樹圖" />