用拓撲圖呈現多層級關係圖

大部分拓撲圖界面都有顯示“分級呈現”的需求。一個複雜的系統或組織,會有很多不同層次的節點和連接關係。如何用圖形相對清晰的呈現出來,是一個需要不斷探討的話題。

453

twaver中有很多的方式可以顯示“分級”的先是方法:

1、用Group網元組顯示。
Group網元組是把一些網元顯示在一個組中。這個組可以雙擊展開、閉合。在閉合狀態,它和一個普通的網元節點沒什麼區別:有位置、有圖標、有動作。雙擊後,默認它會把其內部的孩子顯示出來,而自己變成一個覆蓋所有孩子的“區域”,形狀可能是圓形、方形等。也有人稱之爲“本地展開”。如下圖:

443

2、用SubNetwork子網顯示。
SubNetwork可以用於顯示一個下級網絡,雙擊後進入一個全新場景(包括拓撲圖、地圖等),而當前的數據會完全不再顯示。這就是類似常說的數據“下鑽”或“鑽取”(drill down)。子網外觀和一個常規節點類似,雙擊後會把所有孩子在圖形上用全新場景顯示。和Group不同是它不是“本地展開”,而是“下一級展開”。如下圖:

444

3、用單層的連接來呈現。
一提到“分級”大家很容易想到“組”或“子網”。其實很多情況未必非要用這些元素。很多情況,我們需要表達的僅僅是一個“分級”的關係。而這種關係,完全可以在一個層面上用連線來表示。例如一個多公司、多部門、多步驟的業務流程,可以通過類似下圖的方式進行呈現:

445

這種圖不用組不用子網一樣可以把各種層級和關係顯示出來,而且更容易觀察其“跨級”的連接情況和全局關係。組織內部可能分更多“下級流程”,我們可以配合網元組進行顯示:

446

當連線較多時,可能會造成很多交叉,此時可以使用twaver的自動佈局進行積極干預,讓圖形更清晰:

448

但是自動佈局也避免不了交叉出現的情況,有些圖形結構就是決定了它必然有交叉。此時也可以多想辦法讓圖中連線更清晰一些,例如通過鼠標滑過自動高亮相關的連線:

449

當然,用twaver就要儘量嘗試其提供的優秀特性。例如使用矢量進行描繪,就不需要寫多少代碼,也不怕用戶使勁放大導致難看失真:

450

綜上所述,我們可以靈活利用平面的拓撲圖,來呈現顯示世界中各種“分層”的邏輯,而不必一定使用所謂的分組、下鑽等特性。簡簡單單,一張清晰可人的流程圖就有了。需要源代碼的讀者,可直接發郵件向我們索取。

452

454

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章