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

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

用拓扑图呈现多层级关系图_第1张图片

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

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

用拓扑图呈现多层级关系图_第2张图片

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

用拓扑图呈现多层级关系图_第3张图片

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

用拓扑图呈现多层级关系图_第4张图片

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

用拓扑图呈现多层级关系图_第5张图片

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

用拓扑图呈现多层级关系图_第6张图片

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

用拓扑图呈现多层级关系图_第7张图片

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

用拓扑图呈现多层级关系图_第8张图片

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

用拓扑图呈现多层级关系图_第9张图片

用拓扑图呈现多层级关系图_第10张图片

你可能感兴趣的:(TWaver应用,tooltip)