繪製柱狀/餅圖等統計圖表有成熟庫，但結構圖、關聯圖等節點邊關係複雜、數據量大的圖，頁面佈局是核心難題。d3.js 雖提供高級佈局但 IE 支持弱；JavaScript InfoVis Toolkit 佈局代碼耦合重難剝離。
| 維度 | 樹 | 圖 |
|---|---|---|
| 數據結構定義 | 每個節點僅有一個父節點（根節點除外） | 節點可有任意多個父節點 |
| 直觀佈局傾向 | 單向延伸（左右或上下） | 多向延伸（四周任意方向） |
| 是否允許環 | 不允許 | 允許 |
注：科學定義上樹不可有環，但佈局視角常將「單向層級結構」視為樹佈局對象。
經典算法：Reingold-Tilford 算法（O(n) 時間復雜度），廣泛用於樹狀圖自動佈局。
基於物理模擬：節點間斥力（電荷排斥）、邊吸力（彈簧）、重力/邊界約束。迭代求解平衡位置，無視業務邏輯，純追求視覺美觀與邊長度均勻。
下篇將詳細介紹力導向佈局的物理模型、參數調優及 JavaScript 實現策略。
