程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> JAVA編程 >> JAVA綜合教程 >> 電信網絡拓撲圖自動布局

電信網絡拓撲圖自動布局

編輯:JAVA綜合教程

電信網絡拓撲圖自動布局


在電信網絡拓撲圖中,很經常需要用到自動布局的功能,在大數據的層級關系中,通過手工一個一個擺放位置是不太現實的,工作量是相當大的,那麼就有了自動布局這個概念,來解放布局的雙手,讓網絡拓撲圖能夠布局出一個優美的圖案,當然在一些復雜的布局中,光有自動布局還是不行的,還是需要手工地做些相應的調整,才能讓界面圖案更加的完美。今天我們來聊聊電信網絡拓撲圖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 的具體實現和應用,今天我們就講到這裡。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved