現代的圖形庫通常帶有一個特殊的工具-布局算法，該工具可幫助加快不同圖形類型的創建。此功能用於自動布置圖元素。該算法基於特定規則，計算圖形狀和連接器的位置，並以一種方式放置它們，即使是最復雜的圖也變得清晰而有幫助。
在本文中，我們將仔細研究最流行的自動布局算法類型，了解如何在DHTMLX圖表中實現它們，並從技術角度考慮Web開發人員如何使用我們的圖表組件來應用自動布局功能。
自動布局算法的類型
布局算法可能在許多方面有所不同，但最常見的是，它們在形狀如何互連的方法（即，圖中使用哪種連接器）方面也有所不同。
基於此屬性，布局算法分為多種類型，但是最受歡迎的是分層布局和正交布局。
分層布局算法
DHTMLX在組織結構圖中的分層布局
分層布局算法使用直線和對角線連接器以分層順序排列加載的數據。它有助於在圖中清晰顯示主要方向（或流程）。在此，圖的形狀通常位於分層結構的層中，並且大多數連接器都朝着相同的方向（從左到右，從上到下等）定向。由於連接器之間交叉的可能性很小，因此該算法使該圖更加清晰。
分層布局算法在需要清楚顯示圖節點之間的依賴關系的應用領域中很流行。例如，它廣泛用於可視化業務活動（工作流程圖，PERT圖表，組織結構圖），軟件工程（活動圖），數據庫建模，電氣工程以及其他着重於數據流方向的領域。
正交布局算法
正交布局利用直角連接器來呈現有向圖或無向圖，從而使您可以快速了解節點之間的關系。像分層布局一樣，正交布局算法有助於最大程度地減少交叉的機會，並且還可以確保沒有重疊，並且彎曲盡可能少。因此，圖，尤其是復雜的圖，變得更加緊湊和可讀。
正交布局算法是中型稀疏圖的適當選擇。它可以應用於數據庫模式，系統管理或軟件工程。在ER圖或電路圖中經常會遇到此算法。
如何在DHTMLX圖中使用布局算法
當使用DHTMLX JavaScript圖庫進行數據可視化時，可以直接模式或邊緣模式自動排列圖形狀。在直接模式允許連接圖形狀，其具有在一個層次結構對角線。在邊緣模式啟動直角連接，並幫助您創建正交圖形。
為了配置自動布局算法，Web開發人員有兩個可能的選擇：
使用autoPlace方法。
默認情況下，此方法將實現鏈接形狀的直接模式。
（可選）您可以通過mode參數將其更改為edges模式。
邊緣模式下的直角連接器
如果要在網格上彼此並排放置多個圖，則可以應用graphPadding參數來確定圖之間的間隔（默認為200px）。
var diagram = new dhx.Diagram("diagram");
diagram.data.parse(data);
diagram.autoPlace({
mode: "edges",
graphPadding: 100
});
使用自動放置屬性設置相同的配置參數
var diagram = new dhx.Diagram("container", {
autoplacement: {
mode: "edges",
graphPadding: 100
}
});
圖布局算法也可以在圖編輯器中使用。可以通過自動放置配置指定其設置。這項高級功能可幫助最終用戶從UI更快地構建精美而整潔的圖表。用戶只需要從左側面板拖動所有需要的形狀，通過連接器將它們相互鏈接，然后單擊“自動布局”按鈕即可。連接的形狀將立即組裝成組織良好的圖表。
