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;
			}
		}
	}]
});