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

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

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

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

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

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

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

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

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

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

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

时间: 2024-10-06 00:12:11

用拓扑图呈现多层级关系图的相关文章

用拓扑图呈现多层级关系图(二)

上一篇里我们用TWaver制作了一个公司内部的流程图,这一弹,我们来研究如何呈现出公司内部门和员工间的关系网图.先来看看效果: 例子中我们展示的是各部门员工之间的复杂关系图.在公司内部,不仅部门内部员工之间发生着关系往来,部门和部门之间的员工也在发生这各种往来关系.如果你还是用原先的那种表格来呈现,显然很难直观看出各种关系,用图形化的拓扑呈现就会显得一目了然.好了,我们就来分析一下这张图如何用twaver实现它. 首先我们要定义部门的网元,twaver矢量减少了我们很多定制UI的繁琐,我们直接用

用拓扑图实现多层级关系图(三)可折叠流程图

说到TWaver的流程图却是层出不穷,千姿百态.2D的,3D的,静态的,动态的.这次要给大家呈现的是一款全矢量的,非常清新优美的流程图.先给大家看看效果: 看到这样的图,是不是觉得不就是用了几张贴图嘛,如果这样想,那么你对twaver还是有所了解的.前面我们已经提到了,这是一款全矢量的流程图,这里可没有用到任何贴图哦,下面这些网元都是矢量描述出来的,缩放不失真.接下来我们就来介绍一下如何矢量描述这些网元呢? 这里我们以第一个为例,来介绍如何用矢量来描述这个元素,首先我们需要画一个圆角正方形,并且

Web中树形数据(层级关系数据)的实现—以行政区树为例

在Web开发中常常遇到树形数据的操作,如菜单.组织机构.行政区(省.市.县)等具有层级关系的数据. 以下以行政区为例说明树形数据(层级关系数据)的存储以及实现,效果如图所看到的. 1 数据库表结构设计 树形数据一般通过父节点和子节点实现数据之间的层级关联,层级关系在数据库中主要通过主键和外键来实现. --使用Oracle数据库 --创建行政区表 create table TB_XZQ ( code NUMBER not null, --行政区编码,主键 parent_code NUMBER, -

css盒子模型层级3D图

作为前端开发工程师,大家都应该知道盒子模型.下面用一张图来表达3D盒子模型的层级关系 大家可以看到background-color 在background-image的下一层.这个希望对大家有帮助

项目中遇到的问题:关系图组件兼容性问题解决

1.   问题背景 在开发“客户群成员关系图”功能时,用到了关系图组件MxClient库,在开发过程中,发现该组件在IE8及IE9下有兼容性问题:不能展示图形节点的背景图及样式.不能展示关系图之间的连接线.在IE8兼容模式下.在IE6及IE7下都能正常展示,在IE8标准模式及IE9标准模式下,都不能正常展示. 2.   问题现象 不能正常展示的现象如果下图所示: 3.   问题原因 在排查原因的过程中,发现同样的关系图展示代码,在另外的模块(客户族群管理),能够正常展示关系图数据,由此判断关系图

vue层级关系的数据管理

项目背景:为一些有层级关系的数据管理做一套后台管理系统,例如一个小区,里面是有许多楼,楼里有许多层,每一层有许多不同的房······,现在就是要实现对这些数据进行增删改查操作. 1.Tree(树形组件) Sublime Text 3左侧的项目目录,就是有一定层级关系的"数据"被组织成Tree,然后单击各子树,会呈现不一样的内容,因此可借用这个设计思想来设计这一套系统的导航功能.为什么要做这个导航功能,因为若要简单实现,直接用一个选择器组件,放入所有可选项让用户进行选择即可,然而这样做的

angular7中echarts关系图实战

Echarts关系图实战效果图 第一步: 下载echarts(4.1.0)和ngx-echarts(4.1.0)的依赖包,在angular.json中引入echarts.js,在公共模块中引入 第二步: html页面:<div style="height: 450px" echarts [options]="option" class="bar-chart" (chartInit)="onChartInit($event)&quo

Intellij IDEA 中如何查看maven项目中所有jar包的依赖关系图

Maven 组件界面介绍 如上图标注 1 所示,为常用的 Maven 工具栏,其中最常用的有: 第一个按钮:Reimport All Maven Projects 表示根据 pom.xml 重新载入项目.一般单我们在 pom.xml 添加了依赖包或是插件的时候,发现标注 4 的依赖区中没有看到最新写的依赖的话,可以尝试点击此按钮进行项目的重新载入. 第六个按钮:Execute Maven Goal 弹出可执行的 Maven 命令的输入框.有些情况下我们需要通过书写某些执行命令来构建项目,就可以通

深入Linux内核架构 - 内核之中数据结构之间的关系图 &amp; 设备驱动程序(转)

内核之中数据结构之间的关系图 设备驱动程序