電信網絡拓撲圖自動佈局

在電信網絡拓撲圖中，很常常須要用到自動佈局的功能，在大數據的層級關係中，經過手工一個一個擺放位置是不太現實的，工做量是至關大的，那麼就有了自動佈局這個概念，來解放佈局的雙手，讓網絡拓撲圖可以佈局出一個優美的圖案，固然在一些複雜的佈局中，光有自動佈局仍是不行的，仍是須要手工地作些相應的調整，才能讓界面圖案更加的完美。今天咱們來聊聊電信網絡拓撲圖 HT for Web 在自動佈局上面的相關內容。

在 HT for Web 中有提供兩種佈局方案，一個是 AutoLayout，一個是 ForceLayout。AutoLayout 提供了幾套固定的佈局算法，讓用戶根據不一樣的需求選擇不一樣的佈局算法，比較經常使用的是 circular（圓形佈局）和 symmetic（對稱佈局）兩種佈局方式。

上圖是 circular 圓形佈局的效果，能夠看出在較複雜的佈局上，能夠結合連線呈現一個漂亮的佈局結果。

上圖是 symmetric 對稱佈局的結果，能夠發如今佈局上依據中心點呈相對對稱的佈局，這種佈局方案在空間上看起來會比較緊湊些，比較節約空間。

其餘的佈局類型在這就不一一講解了，具體的能夠查看咱們的 AutoLayout 手冊：http://www.hightopo.com/guide...

ForceLayout（彈力佈局）就和 AutoLayout 區別比較大了，它是根據節點之間存在互斥力，相互鏈接的節點間存在引力，來動態佈局節點的，它須要運行一段時間，總體拓撲結構會逐漸達到收斂穩定的平衡狀態，這纔是真正的佈局結果，不像 AutoLayout 那樣，立刻設置就能夠立刻看到效果，可是在 ForceLayout 佈局的過程當中，其效果也是蠻歡樂的。

這是咱們的彈力佈局結合熱力圖的效果，若是看到其佈局的效果其實更棒。

在 3D 上，也是有它的一片天，照樣能夠很優雅。

關於 ForceLayout 的相關內容在這邊也不一一說明，具體能夠查看咱們的官網手冊：http://www.hightopo.com/guide...

如今問題來了，上面的兩種佈局方式其實還不能徹底知足用戶的需求，不少用戶還有根據特定的形狀去佈局節點，好比，多個節點如何圍繞一個節點作橢圓狀的均勻分佈，多個圖元如何沿着某條曲線作均勻分佈。這些問題該如何解決呢？又該如何去實現呢？接下來咱們就來具體談談如何實現這樣的特定佈局，咱們就叫這種特定佈局叫 ShapeLayout 吧。

http://www.hightopo.com/demo/... 這就是咱們的 ShapeLayout 的效果，將節點根據一個橢圓的形狀佈局，這個是怎麼實現的呢？我先來講收思路吧，其實不難，咱們知道，橢圓和圓均可以轉換爲三角函數來表示，那麼能夠算出每一個節點對應的角度，帶入到三角函數表達式中，就能夠獲得曲線上面的點座標，將節點直接佈置到這個位置就能夠了。

上面的例子中，能夠看到節點間的連線靠近中心的點事在橢圓邊緣上的，而不是在橢圓的中心，這個又是怎麼處理的呢？這邊就涉及到了一個拓展的節點類型，這邊將它命名爲 BusEdgeType，就像 bus 的路線同樣，變化多段，連線適應各類不一樣線條的變化，拖動節點的時候，線條的兩端位置動態變化，時刻尋找着最優的連線路徑。

咱們在後面的章節中再重點闡述下 ShapeLayout 和 BusEdgeType 的具體實現和應用，今天咱們就講到這裏。