大部分拓扑图界面都有显示“分级呈现”的需求。一个复杂的系统或组织,会有很多不同层次的节点和连接关系。如何用图形相对清晰的呈现出来,是一个需要不断探讨的话题。
twaver中有很多的方式可以显示“分级”的先是方法:
1、用Group网元组显示。
Group网元组是把一些网元显示在一个组中。这个组可以双击展开、闭合。在闭合状态,它和一个普通的网元节点没什么区别:有位置、有图标、有动作。双击后,默认它会把其内部的孩子显示出来,而自己变成一个覆盖所有孩子的“区域”,形状可能是圆形、方形等。也有人称之为“本地展开”。如下图:
2、用SubNetwork子网显示。
SubNetwork可以用于显示一个下级网络,双击后进入一个全新场景(包括拓扑图、地图等),而当前的数据会完全不再显示。这就是类似常说的数据“下钻”或“钻取”(drill down)。子网外观和一个常规节点类似,双击后会把所有孩子在图形上用全新场景显示。和Group不同是它不是“本地展开”,而是“下一级展开”。如下图:
3、用单层的连接来呈现。
一提到“分级”大家很容易想到“组”或“子网”。其实很多情况未必非要用这些元素。很多情况,我们需要表达的仅仅是一个“分级”的关系。而这种关系,完全可以在一个层面上用连线来表示。例如一个多公司、多部门、多步骤的业务流程,可以通过类似下图的方式进行呈现:
这种图不用组不用子网一样可以把各种层级和关系显示出来,而且更容易观察其“跨级”的连接情况和全局关系。组织内部可能分更多“下级流程”,我们可以配合网元组进行显示:
当连线较多时,可能会造成很多交叉,此时可以使用twaver的自动布局进行积极干预,让图形更清晰:
但是自动布局也避免不了交叉出现的情况,有些图形结构就是决定了它必然有交叉。此时也可以多想办法让图中连线更清晰一些,例如通过鼠标滑过自动高亮相关的连线:
当然,用twaver就要尽量尝试其提供的优秀特性。例如使用矢量进行描绘,就不需要写多少代码,也不怕用户使劲放大导致难看失真:
综上所述,我们可以灵活利用平面的拓扑图,来呈现显示世界中各种“分层”的逻辑,而不必一定使用所谓的分组、下钻等特性。简简单单,一张清晰可人的流程图就有了。需要源代码的读者,可直接发邮件向我们索取。
相关推荐
物联网拓扑图 3G 卫星 SN网关 SN以太 超市 传感器网络 ----------------------- 服 务 物联网图书馆 ࠀࠂࠄࠎࠐࠒࠔࠖ࠘ࠚࠜࠪࠬ࠰ࡢࡤࡦࡨࢠࢢ짤꿤趍趍趍禯浹呥浭测㩥̠퍪阂Ĉ栖௰$䩏䩑ࡕ嘁Ĉ ᘑη 伀͊儀 ...
Java网络拓扑图,控件自定义 (管理),控件属性显示,支持单双箭头。拓扑图编辑管理
echarts升级版关系图,网络拓扑图,资源关系图,可添加,搜索(支持高亮显示),排序,删除
阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云...
使用Qt实现网络拓扑图的层级结构,可以对网络节点进行拖动,周边的线条也会随之拖动。
基于Flex的实时网络拓扑图呈现系统的设计与实现,章碧云,,本文介绍了一种基于Flex实现的实时拓扑图可视化呈现系统的设计与实现,通过XML文件实现通信接口的设计,利用MVC架构实现了Flex呈现系�
WPF c# 拓扑图 网络部署图源码, 左边拖拽到右边 进行连线,做了个小demo 代码百分百可以用的 ~ ~ 没有visio 那么强大 但是足够学习了,用cavas 画的
网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络...
校园参考拓扑图校园参考拓扑图校园参考拓扑图校园参考拓扑图校园参考拓扑图校园参考拓扑图
电厂 MIS 功能图 拓扑图 电厂 MIS 功能图 拓扑图 电厂 MIS 功能图 拓扑图
现代化,信息化,网络化的图书馆网络拓扑图。。。
如何绘制拓扑图,如何绘制拓扑图.如何绘制拓扑图
等保2.0 三级 拓扑图+设备套餐+详解.pdf等保2.0 三级 拓扑图+设备套餐+详解.pdf等保2.0 三级 拓扑图+设备套餐+详解.pdf等保2.0 三级 拓扑图+设备套餐+详解.pdf等保2.0 三级 拓扑图+设备套餐+详解.pdf等保2.0 三级 ...
大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图
网络拓扑绘图 网络拓扑绘图 网络拓扑绘图 网络拓扑绘图
利用QGraphicsView、QGraphicsPixmapItem、QGraphicsLineItem实现多层子网网络拓扑图
思科实验拓扑图思科实验拓扑图思科实验拓扑图思科实验拓扑图思科实验拓扑图
等保2.0 三级 拓扑图+设备套餐+详解 (2).docx等保2.0 三级 拓扑图+设备套餐+详解 (2).docx等保2.0 三级 拓扑图+设备套餐+详解 (2).docx等保2.0 三级 拓扑图+设备套餐+详解 (2).docx等保2.0 三级 拓扑图+设备套餐+...
C#实现拓扑图的绘制,利用GDI绘图逻辑实现
使用 jsPlumb 绘制拓扑图的通用方法