用拓扑图呈现多层级关系图

阅读更多

大部分拓扑图界面都有显示“分级呈现”的需求。一个复杂的系统或组织，会有很多不同层次的节点和连接关系。如何用图形相对清晰的呈现出来，是一个需要不断探讨的话题。

twaver中有很多的方式可以显示“分级”的先是方法：

1、用Group网元组显示。
Group网元组是把一些网元显示在一个组中。这个组可以双击展开、闭合。在闭合状态，它和一个普通的网元节点没什么区别：有位置、有图标、有动作。双击后，默认它会把其内部的孩子显示出来，而自己变成一个覆盖所有孩子的“区域”，形状可能是圆形、方形等。也有人称之为“本地展开”。如下图：

2、用SubNetwork子网显示。
SubNetwork可以用于显示一个下级网络，双击后进入一个全新场景（包括拓扑图、地图等），而当前的数据会完全不再显示。这就是类似常说的数据“下钻”或“钻取”（drill down）。子网外观和一个常规节点类似，双击后会把所有孩子在图形上用全新场景显示。和Group不同是它不是“本地展开”，而是“下一级展开”。如下图：

3、用单层的连接来呈现。
一提到“分级”大家很容易想到“组”或“子网”。其实很多情况未必非要用这些元素。很多情况，我们需要表达的仅仅是一个“分级”的关系。而这种关系，完全可以在一个层面上用连线来表示。例如一个多公司、多部门、多步骤的业务流程，可以通过类似下图的方式进行呈现：

这种图不用组不用子网一样可以把各种层级和关系显示出来，而且更容易观察其“跨级”的连接情况和全局关系。组织内部可能分更多“下级流程”，我们可以配合网元组进行显示：

当连线较多时，可能会造成很多交叉，此时可以使用twaver的自动布局进行积极干预，让图形更清晰：

但是自动布局也避免不了交叉出现的情况，有些图形结构就是决定了它必然有交叉。此时也可以多想办法让图中连线更清晰一些，例如通过鼠标滑过自动高亮相关的连线：

当然，用twaver就要尽量尝试其提供的优秀特性。例如使用矢量进行描绘，就不需要写多少代码，也不怕用户使劲放大导致难看失真：

综上所述，我们可以灵活利用平面的拓扑图，来呈现显示世界中各种“分层”的逻辑，而不必一定使用所谓的分组、下钻等特性。简简单单，一张清晰可人的流程图就有了。需要源代码的读者，可直接发邮件向我们索取。