XML 數據繪製樹狀圖佈局算法：D3.js 實戰指南

問題

根據 XML 格式數據繪製類似組織架構圖的樹狀結構，需計算各層級節點坐標位置。

推薦方案：D3.js 層次佈局

無需造輪子，D3 提供成熟的 d3.tree()、d3.hierarchy() 佈局引擎。

核心步驟

1. XML → JSON：前端用 DOMParser 或後端轉換。

   const parser = new DOMParser();
   const xmlDoc = parser.parseFromString(xmlString, "text/xml");
   const jsonData = xmlToJson(xmlDoc.documentElement);

2. 構建層次結構：

   const root = d3.hierarchy(jsonData, d => d.children);

3. 樹佈局計算座標：

   const treeLayout = d3.tree().size([width, height]);
   treeLayout(root); // 節點獲得 x, y, depth 等屬性

4. SVN/Canvas 渲染：綁定節點/連線數據繪製。

完整示例參考

Mike Bostock 的可縮放樹圖示例（JSON 數據，XML 易轉換）。

關鍵算法細節（自研時參考）

• Reingold-Tilford 算法：標準樹佈局算法，O(n) 計算節點 x 座標，保證父節點居中、兄弟節點等距、子樹不重疊。
• 分層佈局：y 座標由 depth 決定，x 由後序遍歷計算初步位置，再預序遍歷修正衝突。
• 節點寬度自適應：先渲染文字測量寬度，再佈局或佈局後微調。

技術選型建議

結論：數據轉 JSON → D3 佈局 → SVG/Canvas 渲染 是性價比最高的路徑。