前阵子,项目中碰到这样一个显示难题:一组树形的网络设备,要在拓扑图上同时显示出树形从属关系,以及动态存在于任意两个设备之间的业务关系。也就是说,拓扑图上要同时显示两组数据:一套是树形的从属关系,一套是随机在节点之间产生的某种业务关系。当然要求是用连线显示,而且形状要清晰、不要混乱。
这是一个难题。一个树形结构并不难显示,也可以很方便的布局。例如,设置一下节点、连线样式,并设置数据到twaver的databox中,通过layout()函数即可得到下面的图:
twaver.Styles.setStyle('label.position','right.right'); twaver.Styles.setStyle('label.font','10px arial'); twaver.Styles.setStyle('link.from.xoffset',4); twaver.Styles.setStyle('link.to.xoffset',-4); twaver.Styles.setStyle('link.width',2); twaver.Styles.setStyle('link.color','#CCCCCC'); twaver.Styles.setStyle('select.style','none');
非常清晰可人。不过如果再加上随机的两点之间的连线,就很乱了,而且也无法很好的布局。
继续想想办法。当层级关系很深之后,这种平铺的tree会延展的很宽,左右滚来滚去很不方便。如果能把树环形排列起来,就不怕层级太多,如下图:
var root=new twaver.Node(); root.setLocation(x,y); root.setClient('level',0); root.setSize(50,50); root.setImage('circle'); root.setName(name); root.setClient('group', groupID); root.setClient('root', root); root.setStyle('label.position','center'); root.setStyle('label.color','white'); root.setStyle('label.font','12px "Microsoft Yahei"'); box.add(root);
这样排列的好处是,当层级很多,整个树也会尽量盘踞蜷缩在一起,不至于太宽或太高。而且层次也非常清晰。
如果加上动态业务连接关系呢?例如这些点表示计算机,连线表示他们之间的socket连接。随机生成一些连线,颜色用红色区分,则大概如下:
var connection=new twaver.Link(node, target); connection.setStyle('link.width',0.2); connection.setStyle('link.color', 'red');//#aaaaaa'); connection.setClient('connection',true); connection.setClient('angle', (target.getClient('angle')+node.getClient('angle'))/2); box.add(connection);
瞬间就凌乱了,有木有。这样肯定不行,用户眼都花了。而且两组线交织在一起,哪个都看不清。
于是进一步考虑视觉优化。由于业务连线是动态的、根据设备来查看的,所以不需要一下子显示清楚所有的业务连线。所以可以考虑用淡淡的颜色来弱化业务线的存在。还好html5的canvas允许我们使用小数的线宽和带透明度的颜色。这里就用0.2的线宽和#aaaaaa的淡灰色来设置业务线试试,效果如下:
link.setStyle('link.width',0.2); link.setStyle('link.color', '#aaaaaa');
这样效果好了很多。主要是淡淡的灰色线条不影响全图的主结构关系,用户依旧可以一眼看清全图结构。不过业务连接线的存在感并不太强,需要加强一下。继续改进:鼠标划过一个节点,让它关联的连线都通过换颜色高亮起来,看效果如何:
if(link.getClient('connection')){ if(link.getFromNode()==element || link.getToNode()==element){ link.setStyle('link.color', 'red'); link.setStyle('link.width', 1); link.getFromNode().setClient('rover', true); link.getToNode().setClient('rover', true); link.getFromNode().setClient('alpha', 1); link.getToNode().setClient('alpha', 1); }else{ link.setStyle('link.width',0.2); link.setStyle('link.color', '#aaaaaa'); } }
这样就清晰多了。当层级再多,也不会显得混乱。
如果进一步控制环形的布局角度和方向,还可以做出更多有意思的形状:
看,谁说拓扑图一定要死板呢?两套连线也可以非常清晰的显示和同时存在。对代码感兴趣的同学可以留言探讨,谢谢!
相关推荐
html5环形流程图可添加流程图代码
为克服全局粒子群优化算法易陷入局部最优的缺点,基于全局自适应速度粒子群优化(SAVPSO)算法,给出一种基于环形邻域拓扑的局部SAVPSO算法来求解约束优化问题,同时采用动态目标方法(DOM)来有效处理约束条件,并...
环形植树问题.pdf
如果将空间拓扑约束为三维环面的拓扑,我们将证明系统将围绕动态形成的背景几何结构波动,这可以从包含经典部分和量子部分的简单微型超空间动作中理解。 我们通过整合完整模型中的自由度以及转移矩阵方法来确定此...
近20款样式的HTML5环形进度条插件 近20款样式的HTML5环形进度条插件
用echart实现的柱状图,折线图,环形图,柱状环形图。
网络游戏-用于在片上环形网络中减少时延的非对称环形网拓扑.zip
HTML5 CSS3 3D环形图片墙 伴随旋转动画 HTML5CSS3 3D环形图片墙 伴随旋转动画
记得很早以前我们分享过一款功能很...今天我们要介绍另外一款基于SVG和HTML5的环形颜色拾取器,非常具有创意。20种颜色组成一个圆环,每一种颜色都有相近的5种颜色可以选取,唯一遗憾的是不能根据任意的RGB值选取颜色。
无线传感器网络实验 五种网络拓扑结构的生成:总线型,星型,网状,树型,环型 语言:MATLAB+Python
总线型vrfffg fdgxdgf 、 dfx
HTML5环形音乐播放器是一款HTML5环形音乐播放器可以有播放列表,用户可以选择音乐来播放。
源码分享,采用PowerBuilder12.5实现码表图、环形比例图。
react组件,用于各种圆形方形进度条、环形图、饼状图等
不久前我们已经分享过一款很酷的HTML5环形音乐播放器HTML5环形音乐播放器 播放器外观非常酷,今天我们要分享的HTML5音乐播放器也是环形的,和上一款不同的是这款HTML5环形音乐播放器可以有播放列表,用户可以选择...
之前我们也分享过几个...今天要分享的这款HTML5图表是一个环形的,和饼状图表类似,主要特点也是能清晰的了解每项数据所占的比例。这款HTML5环形图表是利用SVG实现的,图表数据在初始化的时候将出现非常酷的动画效果。
HTML5 环形进度条显示百分比 运用CSS3技术实现,环形的加载动画,十分的漂亮有个性哦。
3d环形图可以用鼠标拖拽 把里面的事件改了可以在手机上拖拽