Posted on 2015-04-13 11:38
TWaver 閱讀(1962)
評論(0) 編輯 收藏
大部分拓撲圖界面都有顯示“分級呈現”的需求。一個復雜的系統或組織，會有很多不同層次的節點和連接關系。如何用圖形相對清晰的呈現出來，是一個需要不斷探討的話題。
twaver中有很多的方式可以顯示“分級”的先是方法：
1、用Group網元組顯示。
Group網元組是把一些網元顯示在一個組中。這個組可以雙擊展開、閉合。在閉合狀態，它和一個普通的網元節點沒什么區別：有位置、有圖標、有動作。雙擊后，默認它會把其內部的孩子顯示出來，而自己變成一個覆蓋所有孩子的“區域”，形狀可能是圓形、方形等。也有人稱之為“本地展開”。如下圖：
2、用SubNetwork子網顯示。
SubNetwork可以用于顯示一個下級網絡，雙擊后進入一個全新場景（包括拓撲圖、地圖等），而當前的數據會完全不再顯示。這就是類似常說的數據“下鉆”或“鉆取”（drill down）。子網外觀和一個常規節點類似，雙擊后會把所有孩子在圖形上用全新場景顯示。和Group不同是它不是“本地展開”，而是“下一級展開”。如下圖：
3、用單層的連接來呈現。
一提到“分級”大家很容易想到“組”或“子網”。其實很多情況未必非要用這些元素。很多情況，我們需要表達的僅僅是一個“分級”的關系。而這種關系，完全可以在一個層面上用連線來表示。例如一個多公司、多部門、多步驟的業務流程，可以通過類似下圖的方式進行呈現：
這種圖不用組不用子網一樣可以把各種層級和關系顯示出來，而且更容易觀察其“跨級”的連接情況和全局關系。組織內部可能分更多“下級流程”，我們可以配合網元組進行顯示：
當連線較多時，可能會造成很多交叉，此時可以使用twaver的自動布局進行積極干預，讓圖形更清晰：
但是自動布局也避免不了交叉出現的情況，有些圖形結構就是決定了它必然有交叉。此時也可以多想辦法讓圖中連線更清晰一些，例如通過鼠標滑過自動高亮相關的連線：
當然，用twaver就要盡量嘗試其提供的優秀特性。例如使用矢量進行描繪，就不需要寫多少代碼，也不怕用戶使勁放大導致難看失真：
綜上所述，我們可以靈活利用平面的拓撲圖，來呈現顯示世界中各種“分層”的邏輯，而不必一定使用所謂的分組、下鉆等特性。簡簡單單，一張清晰可人的流程圖就有了。需要源代碼的讀者，可直接發郵件向我們索取。
