HTML5环形树拓扑图

前阵子，项目中碰到这样一个显示难题：一组树形的网络设备，要在拓扑图上同时显示出树形从属关系，以及动态存在于任意两个设备之间的业务关系。也就是说，拓扑图上要同时显示两组数据：一套是树形的从属关系，一套是随机在节点之间产生的某种业务关系。当然要求是用连线显示，而且形状要清晰、不要混乱。

 

这是一个难题。一个树形结构并不难显示，也可以很方便的布局。例如，设置一下节点、连线样式，并设置数据到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');
	}
}				

 

 

 这样就清晰多了。当层级再多，也不会显得混乱。

 

 如果进一步控制环形的布局角度和方向，还可以做出更多有意思的形状：

 

 
 

 

 

看，谁说拓扑图一定要死板呢？两套连线也可以非常清晰的显示和同时存在。对代码感兴趣的同学可以留言探讨，谢谢！

评论

3 楼 shuishan_sun 2017-01-22  

你好，现在正在学习twaver，对您这个例子很感兴趣，请问能把原发发我一份研究一下么？
[e-mail]

2 楼 007007jing 2015-09-23  

做的很炫。最近正好在做人际关系拓扑图，大神方便的时候给发份代码  [e-mail] 谢谢

1 楼 out_lier 2015-09-21  

楼主这个很清晰明了啊，是使用什么工具做的，我现在有个类似的需求，通过这种方式做出来应该会比较惊艳。