HTML5流程图之复杂关系网

关系网图的呈现方式多种多样，今天我们给大家分享的是和弦式的关系网图，先来看看效果：

例子中我们展示的是各部门员工之间的复杂关系图。在公司内部，不仅部门内部员工之间发生着关系往来，部门和部门之间的员工也在发生这各种往来关系。如果你还是用原先的那种表格来呈现，显然很难直观看出各种关系，用图形化的拓扑呈现就会显得一目了然。好了，我们就来分析一下这张图如何用twaver实现它。
首先我们要定义部门的网元，twaver矢量减少了我们很多定制UI的繁琐，我们直接用矢量来描述这个小圆点部分，注意小圆点的颜色需要区分鼠标滑过时的效果，这里我们定义了是否需要高亮的属性：highlighted，代码如下：

twaver.Util.registerImage('circle_node', {		
	w: 200,
	h: 200,
	lineWidth:1,
	lineColor: 'black',	
	v: [{
		shape: 'circle',		
		r: 6,
		fill: function(data, view){
			if(data.getClient('highlighted')){
				return highlightedNodeColor;
			}else{				
				return normalNodeColor;
			}
		}
	}]
});

第一步，小圆点描述好了，接下来就需要为圆点加上文字的显示，文字如果按照默认的显示方式显然不太好，因为我们是要让文字进行旋转，而文字所处的位置需要根据角度来计算对其方式和偏移值，当然文字也需要鼠标滑过的效果：

{
	shape: 'text',
	text: '<%=getClient("text")%>',
	textAlign: function(data, view){
		var angle=data.getClient('angle'	)+ball.angle;
		angle=angle%360;
		if(angle<0){
			angle=angle+360;
		}
		if(angle>90 && angle<270){
			return 'right';
		}
		return 'left';
	},
	textBaseline: 'middle',
	font: '12px "Microsoft Yahei"',
	fill: function(data, view){
		if(data.getClient('highlighted')){
			return highlightedNodeColor;
		}else{				
			return 'black';
		}
	},
	x: function(data, view){
		var angle=data.getClient('angle'	)+ball.angle;
		angle=angle%360;
		if(angle<0){
			angle=angle+360;
		}
		if(angle>90 && angle<270){
			return -10
		}
		return 10;
	},			
}

好了，第三步需要让整个节点能旋转起来，因此我们还需要为node加上旋转的矢量描述：

rotate: function(data, view){
	var angle=data.getClient('angle')+ball.angle;
	angle=angle%360;
	if(angle<0){
		angle=angle+360;
	}
	if(angle>90 && angle<270){
		angle+=180;
	}
	return angle;
}

至此部门的节点就定制好了，是不是感觉复杂了一下，没关系，如果想要这样的功能，直接使用我们封装好的这个就可以了。
接着我们还需要来定制连线，上图中连线走向的那种方式在twaver产品中已经是很常见了，这里我们就不多描述了。
OK，准备好节点和连线的矢量描述之后就可以来填充数据了，创建好公司的所有部门以及员工之间的关系后，我们还需要给部门设置上旋转的度数：

for(var i=0;i<size;i++){
	var angle=Math.PI*2/size*i;
	var x=ball.cx+ball.width*Math.cos(angle);
	var y=ball.cy+ball.height*Math.sin(angle);
	var id='n'+i;
	var degree=parseInt(angle/Math.PI*180);
	var node=createNode(box, id, x, y, '部门'+i, degree);
}

这样我们上面的那张图的功能就差不多了。也许有人会觉得怎么都是呈现的是部门，如何才能看到部门下哪些员工和另外的部门有关系呢。是的，到此我们还只完成了一半，还有更精彩的内容呈现给大家。
双击部门后，可以展开这个部门，并显示部门下所有的员工。

是不是很帅，注意这里是有动画效果的，双击某个部门，这个部门会转到顶部，然后展开这个部门。这个用twaver新增的动画功能很容易来实现，这里就不多说了。下面录制了一个视频供大家欣赏。这样我们就能更清楚的知道这个部门下的员工和哪个部门下的员工有业务往来关系了。下图是一个gif图片，下载有点慢，请耐心等待。

 

 

或者直接点击看视频：

http://player.youku.com/embed/XOTM2MzE1ODE2