用拓撲圖呈現多層級關係圖（二）

上一篇裏我們用TWaver製作了一個公司內部的流程圖，這一彈，我們來研究如何呈現出公司內部門和員工間的關係網圖。先來看看效果：


例子中我們展示的是各部門員工之間的複雜關係圖。在公司內部，不僅部門內部員工之間發生着關係往來，部門和部門之間的員工也在發生這各種往來關係。如果你還是用原先的那種表格來呈現，顯然很難直觀看出各種關係，用圖形化的拓撲呈現就會顯得一目瞭然。好了，我們就來分析一下這張圖如何用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://v.youku.com/v_show/id_XOTM2MzE1ODE2.html
想要demo的小夥伴們可發郵件到[email protected]，我們會將完整代碼呈現給您。