在電信網路拓撲圖中，很經常需要用到自動佈局的功能，在大資料的層級關係中，通過手工一個一個擺放位置是不太現實的，工作量是相當大的，那麼就有了自動佈局這個概念，來解放佈局的雙手，讓網路拓撲圖能夠佈局出一個優美的圖案，當然在一些複雜的佈局中，光有自動佈局還是不行的，還是需要手工地做些相應的調整，才能讓介面圖案更加的完美。今天我們來聊聊電信網路拓撲圖 HT for Web 在自動佈局上面的相關內容。
在 HT for Web 中有提供兩種佈局方案，一個是 AutoLayout，一個是 ForceLayout。AutoLayout 提供了幾套固定的佈局演算法，讓使用者根據不同的需求選擇不同的佈局演算法，比較常用的是 circular（圓形佈局）和 symmetic（對稱佈局）兩種佈局方式。
上圖是 circular 圓形佈局的效果，可以看出在較複雜的佈局上，可以結合連線呈現一個漂亮的佈局結果。
上圖是 symmetric 對稱佈局的結果，可以發現在佈局上依據中心點呈相對對稱的佈局，這種佈局方案在空間上看起來會比較緊湊些，比較節約空間。
其他的佈局型別在這就不一一講解了，具體的可以檢視我們的 AutoLayout 手冊：http://www.hightopo.com/guide/guide/plugin/autolayout/ht-autolayout-guide.html
ForceLayout（彈力佈局）就和 AutoLayout 區別比較大了，它是根據節點之間存在互斥力，相互連線的節點間存在引力，來動態佈局節點的，它需要執行一段時間，整體拓撲結構會逐漸達到收斂穩定的平衡狀態，這才是真正的佈局結果，不像 AutoLayout 那樣，馬上設定就可以馬上看到效果，但是在 ForceLayout 佈局的過程中，其效果也是蠻歡樂的。
這是我們的彈力佈局結合熱力圖的效果，如果看到其佈局的效果其實更棒。
在 3D 上，也是有它的一片天，照樣可以很優雅。
關於 ForceLayout 的相關內容在這邊也不一一說明，具體可以檢視我們的官網手冊：http://www.hightopo.com/guide/guide/plugin/forcelayout/ht-forcelayout-guide.html
現在問題來了，上面的兩種佈局方式其實還不能完全滿足使用者的需求，很多使用者還有根據特定的形狀去佈局節點，比如，多個節點如何圍繞一個節點做橢圓狀的均勻分佈，多個圖元如何沿著某條曲線做均勻分佈。這些問題該如何解決呢？又該如何去實現呢？接下來我們就來具體談談如何實現這樣的特定佈局，我們就叫這種特定佈局叫 ShapeLayout 吧。
http://www.hightopo.com/demo/EdgeType/ShapeLayout-Oval.html 這就是我們的 ShapeLayout 的效果，將節點根據一個橢圓的形狀佈局，這個是怎麼實現的呢？我先來說收思路吧，其實不難，我們知道，橢圓和圓都可以轉換為三角函式來表示，那麼可以算出每個節點對應的角度，帶入到三角函式表示式中，就可以得到曲線上面的點座標，將節點直接佈置到這個位置就可以了。
上面的例子中，可以看到節點間的連線靠近中心的點事在橢圓邊緣上的，而不是在橢圓的中心，這個又是怎麼處理的呢？這邊就涉及到了一個擴充的節點型別，這邊將它命名為 BusEdgeType，就像 bus 的路線一樣，變化多段，連線適應各種不同線條的變化，拖動節點的時候，線條的兩端位置動態變化，時刻尋找著最優的連線路徑。
我們在後面的章節中再重點闡述下 ShapeLayout 和 BusEdgeType 的具體實現和應用，今天我們就講到這裡。