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