在現代的數據可視化和網絡管理中，拓撲圖是一種非常重要的工具。它可以直觀地展示節點(Node)和節點之間的關係(Edge)。無論是在 2D 還是 3D 環境中，拓撲圖都可以幫助我們更好地理解和管理複雜的系統。
然而，由於這些拓撲圖通常極為複雜，傳統的手動佈局方式不僅繁瑣且耗時。鑑於此，圖撲軟件自研 HT for Web 產品（以下簡稱為 HT）推出了自動佈局、彈力佈局插件，從根本上解決了這一問題。
這些案例不僅限於 2D 和 3D 拓撲圖，還涉及到 GIS 場景的應用，展示了廣泛的應用場景和強大的功能。
系統分析
自動佈局在 2D 中的運用
圖撲軟件 HT 自動佈局插件總共有七種佈局方式：圓形佈局、對稱佈局、層次佈局、朝北佈局、朝南佈局、朝東佈局和朝西佈局。
在拓撲圖的製作過程中，我們會使用自動佈局來進行初始佈局操作。然而，自動佈局並非萬能良藥，無法在所有情況下都完全達到我們的預期效果。因此，通常在自動佈局之後，我們也會對圖紙進行一些手動微調，以達到優質的展示效果。
以上圖示例為例，圖內拓撲是從左到右佈局的效果。儘管節點之間呈簡單的樹形層次關係，但節點位置錯落不齊，並且需要使用多種類型的連線，所以單純使用自動佈局達不到預期的效果。接下來簡單介紹一下這個 demo 的實現步驟：
1.
在圖紙上創建好節點並設定節點之間的連線關係後，我們可以使用自動佈局來進行初始佈局操作。在示例中，我們希望展示一個從左到右的佈局，這時可以使用自動佈局工具中的朝東佈局(towardeast)來實現這一效果。設置自動佈局的相關代碼：
let autoLayout = new ht.layout.AutoLayout(view, {
gap: 30
});
layout(false);
function layout(animate) {
autoLayout.setAnimate(animate);
autoLayout.layout('towardeast', function () {
view.fitContent(animate);
});
}
朝東佈局(towardeast)僅適用於樹形層次結構。如果圖紙中存在非樹形層次結構的連線，在初始佈局時可以先不進行連線操作，待自動佈局完成後再創建相應的連線。
2.
手動調整節點的位置：在獲取到節點後，通過 node.setPosition ({x: 100, y: 100}) 方法重新設置其位置。最終可以得到如下的效果圖：
3.
經過步驟 2 後，整體拓撲仍顯雜亂。此時，可以根據節點的位置等因素，調整連線的類型、間距和錨點等屬性。 同時，還可以修改連線的顏色和寬度等樣式屬性，以實現理想效果。調整完成後的效果如下：
4.
最後再加上一些文本內容，一個完整的拓撲圖就完成了。
自動佈局在 3D 中的運用
隨着 OpenGL 和 WebGL 等圖形技術的發展，3D 視覺表達方式越來越受到重視。拓撲圖的呈現方式也從傳統的 2D 展示逐漸轉向更立體和動態的 3D 展現。圖撲 HT 的自動佈局功能不僅在 2D 中廣泛應用，在 3D 中也同樣適用。
無論是在 2D 還是 3D 環境中，自動佈局的使用方式都是一致的。在 3D 環境中，自動佈局實際上設置的是 3D 座標中的 xz 平面。對於 3D 場景中獨有的的 y 軸，則需要通過 node.setElevation(elevation) 方法來進行設置。
只設置了自動佈局產生的效果如下：
根據層級設置不同 y 軸座標產生的效果：
彈力佈局
彈力佈局又稱之為導向佈局，根據節點之間的斥力、相互連接的節點之間存在在引力運行，並且會逐漸達到收斂穩定的平衡狀態。彈力佈局具有指向性，通常用於標識物與物、人與人之間的關係， 這種佈局方式特別有助於表達元素之間的關聯性和依賴性，使用户直觀地觀察到各個元素之間的交互和聯繫。
接下來用一個示例來演示彈力佈局的實現過程，示例效果如下：
在圖紙上創建好節點並設置好節點間的連線關係後，就可添加彈力佈局相關代碼。在實例化 ht.layout.ForceLayout 時，可以傳入 DataModel 、GraphView 和 Graph3dView 三種參數。默認僅對未選中圖元進行佈局，如果參數為 GraphView 和 Graph3dView 時，則視圖組件的 isMovable 和 isVisible 函數將影響圖元是否可佈局，圖元 style 上的 layoutable 屬性也可設為 false 阻止圖元參與佈局。
const forceLayout = new ht.layout.ForceLayout(view);
forceLayout.start(); // 啓動彈力佈局
forceLayout.setNodeRepulsion(0.7) // 設置節點間斥力，值越大節點間斥力越大，節點佈局越分散。
forceLayout.setEdgeRepulsion(0.7) // 設置節點間斥力，值越大連線節點間斥力越大，連線節點佈局越分散。
view.setZoom(0.38); // 設置圖紙縮放值在 3D 中也可使用 ht.layout.Force3dLayout 類來設置彈力佈局，具體設置方式同 ht.layout.ForceLayout。
您可以至圖撲軟件官網查看更多案例及效果：
https://www.hightopo.com/demos/index.html
