前言
從上一篇：
[Web Chart系列之二] 各種實現js 圖表的library匯總與比較
的介紹， 目前提供提供繪制矢量圖的library 還是很多的。
如果只是需要繪制一些柱狀圖， 餅圖， 散點圖, 時序圖這樣一些簡單圖的話， 從所列出的library 中是可以找到很多選擇的。
但是如果需要繪制的是結構圖， 關聯圖這樣一些數據量大，邏輯稍顯復雜的圖，頁面布局就是需要面臨的一個大問題了。
d3.js 提供了比較高級的的頁面布局， 樹形圖；爆炸圖； 三維圖。 以及有專門使用其開發實現layout的ECO System(理解為衍生庫好了)。 但是比較致命的是d3.js 對於IE的支持不好。
JavaScript InfoVis Toolkit ， sencha(研發Extjs的公司)的一個實驗項目。也提供了動畫效果的樹狀圖，力導向圖。缺點是layout 部分的代碼緊緊的綁定在其他代碼中， 要想剝離或是改動的話，就比較困難了。
布局的討論
這裡只討論兩種布局： 樹和圖。 為什麼只討論這兩種？ 餅圖， 柱狀圖相當簡單， 而且有大量的現有組件可以使用。 三維圖， 筆者暫時尚未涉入到此部分，所以也就不討論了。
首先需要明確的一個問題是： 樹和圖的區別？
直觀上的感覺好像是： 往左右或是上下兩個方向延伸的是樹， 往四周任意方向延伸的是圖。
這種感覺在科學上是不科學的。 《數據結構》裡對樹和圖有很明確的界定。最大的區別就是：
樹： 一個節點只有父節點。
圖： 一個節點可以有任意多個父節點。
從這個意義上來說， 樹也可以是環形的。
但是， 這裡討論的layout 討論的樹和圖的概念， 還是有點偏向於直觀上的理解： 左右或是上下兩個方向延伸的是樹， 往四周任意方向延伸的是圖。
樹的布局
樹的布局算法相對簡單，只需要遵循一些基本的原則就可以了：
1. 在同一層的節點之間應該保持一定的距離。
2. 父節點需要位於其包含的所有子節點的中心位置
3. 整個樹應盡量保持對稱，平衡。
4. 相同子樹的呈現效果應盡量相同
5. 在不違反以上規則的狀況相， 樹應該盡量的省空間。
圖的布局
圖的布局方式很多， 綜合起來， 常見的有以下2種
1. 環形
環形圖又分為兩種
a) 同心圓： 所有的子節點層都圍繞一個圓點展開。
b) 異心圓： 每個子節點都是下一級子節點的圓心。
2. 力導向(Force-directed)
這種布局不關心業務數據的邏輯， 只是單單從展現的效果最美觀來顯示圖形。
使用到了物理學上裡的概念。
關於此布局， 後續會有詳細的介紹。
