D3.js 佈局

佈局，能夠理解成 「製做常見圖形的函數」，有了它製做各類相對複雜的圖表就方便多了。

 

 

 

1、佈局是什麼

　　佈局，英文是 Layout。從字面看，能夠想到有「決定什麼元素繪製在哪裏」的意思。佈局是 D3 中一個十分重要的概念。

　　D3 與其它不少可視化工具不一樣，相對來講較底層，對初學者來講不太方便，可是一旦掌握了，就比其餘工具更加駕輕就熟。下圖展現了 D3 與其它可視化工具的區別：

　　

　

　 能夠看到，D3 的步驟相對來講較多。壞處是對初學者不方便、也很差理解。好處是可以製做出更加精密的圖形。所以，咱們能夠據此定義何時選擇 D3 比較好：

• 選擇 D3：若是但願開發腦海中任意想象到的圖表。
• 選擇 Highcharts、Echarts 等：若是但願開發幾種固定種類的、十分大衆化的圖表。

 

 

2、如何理解佈局

　　從上面的圖能夠看到，佈局的做用是：將不適合用於繪圖的數據轉換成了適合用於繪圖的數據。

　　所以，爲了便於初學者理解，本站的教程叫佈局的做用解釋成：數據轉換。

 

 

 

3、佈局有哪些

　　D3 總共提供了 12 個佈局：餅狀圖（Pie）、力導向圖（Force）、弦圖（Chord）、樹狀圖（Tree）、集羣圖（Cluster）、捆圖（Bundle）、打包圖（Pack）、直方圖（Histogram）、分區圖（Partition）、堆棧                                                圖（Stack）、矩陣樹圖（Treemap）、層級圖（Hierarchy）。
　　12 個佈局中，層級圖（Hierarchy）不能直接使用。集羣圖、打包圖、分區圖、樹狀圖、矩陣樹圖是由層級圖擴展來的。如此一來，可以使用的佈局是 11 個（有 5 個是由層級圖擴展而來）。

　　這些佈局的做用都是將某種數據轉換成另外一種數據，而轉換後的數據是利於可視化的。

 

　　Bundle  —-  捆圖

　　　　

　　Chord  —-  弦圖

　　　　

　　Cluster  —-  集羣圖

　　　　

　　Force  —-  力學圖、力導向圖

　　　　

　　Histogram  —-  直方圖（數據分佈圖）

　　　　

　　Pack  —-  打包圖

　　　　

　　Partition  —-  分區圖

　　　　

　　Pie  —-  餅狀圖

　　　　

　　Stack  —-  堆棧圖

　　　　

　　Tree  —-  樹狀圖

　　　　

　　Treemap  —-  矩陣樹圖