Posted on 2015-05-22 17:06
TWaver 閱讀(3632)
評論(0) 編輯 收藏
關系網圖的呈現方式多種多樣，今天我們給大家分享的是和弦式的關系網圖，先來看看效果：
例子中我們展示的是各部門員工之間的復雜關系圖。在公司內部，不僅部門內部員工之間發生著關系往來，部門和部門之間的員工也在發生這各種往來關系。如果你還是用原先的那種表格來呈現，顯然很難直觀看出各種關系，用圖形化的拓撲呈現就會顯得一目了然。好了，我們就來分析一下這張圖如何用twaver實現它。
首先我們要定義部門的網元，twaver矢量減少了我們很多定制UI的繁瑣，我們直接用矢量來描述這個小圓點部分，注意小圓點的顏色需要區分鼠標滑過時的效果，這里我們定義了是否需要高亮的屬性：highlighted，代碼如下：
1 twaver.Util.registerImage('circle_node', {
2 w: 200,
3 h: 200,
4 lineWidth:1,
5 lineColor: 'black',
6 v: [{
7 shape: 'circle',
8 r: 6,
9 fill: function(data, view){
10 if(data.getClient('highlighted')){
11 return highlightedNodeColor;
12 }else{
13 return normalNodeColor;
14 }
15 }
16 }]
17 });
第一步，小圓點描述好了，接下來就需要為圓點加上文字的顯示，文字如果按照默認的顯示方式顯然不太好，因為我們是要讓文字進行旋轉，而文字所處的位置需要根據角度來計算對其方式和偏移值，當然文字也需要鼠標滑過的效果：
1 [code]
2 {
3 shape: 'text',
4 text: '<%=getClient("text")%>',
5 textAlign: function(data, view){
6 var angle=data.getClient('angle' )+ball.angle;
7 angle=angle%360;
8 if(angle<0){
9 angle=angle+360;
10 }
11 if(angle>90 && angle<270){
12 return 'right';
13 }
14 return 'left';
15 },
16 textBaseline: 'middle',
17 font: '12px "Microsoft Yahei"',
18 fill: function(data, view){
19 if(data.getClient('highlighted')){
20 return highlightedNodeColor;
21 }else{
22 return 'black';
23 }
24 },
25 x: function(data, view){
26 var angle=data.getClient('angle' )+ball.angle;
27 angle=angle%360;
28 if(angle<0){
29 angle=angle+360;
30 }
31 if(angle>90 && angle<270){
32 return -10
33 }
34 return 10;
35 },
36 }
好了，第三步需要讓整個節點能旋轉起來，因此我們還需要為node加上旋轉的矢量描述：
1 rotate: function(data, view){
2 var angle=data.getClient('angle')+ball.angle;
3 angle=angle%360;
4 if(angle<0){
5 angle=angle+360;
6 }
7 if(angle>90 && angle<270){
8 angle+=180;
9 }
10 return angle;
11 }
至此部門的節點就定制好了，是不是感覺復雜了一下，沒關系，如果想要這樣的功能，直接使用我們封裝好的這個就可以了。
接著我們還需要來定制連線，上圖中連線走向的那種方式在twaver產品中已經是很常見了，這里我們就不多描述了。
OK，準備好節點和連線的矢量描述之后就可以來填充數據了，創建好公司的所有部門以及員工之間的關系后，我們還需要給部門設置上旋轉的度數：
1 for(var i=0;i<size;i++){
2 var angle=Math.PI*2/size*i;
3 var x=ball.cx+ball.width*Math.cos(angle);
4 var y=ball.cy+ball.height*Math.sin(angle);
5 var id='n'+i;
6 var degree=parseInt(angle/Math.PI*180);
7 var node=createNode(box, id, x, y, '部門'+i, degree);
8 }
這樣我們上面的那張圖的功能就差不多了。也許有人會覺得怎么都是呈現的是部門，如何才能看到部門下哪些員工和另外的部門有關系呢。是的，到此我們還只完成了一半，還有更精彩的內容呈現給大家。
雙擊部門后，可以展開這個部門，并顯示部門下所有的員工。
是不是很帥，注意這里是有動畫效果的，雙擊某個部門，這個部門會轉到頂部，然后展開這個部門。這個用twaver新增的動畫功能很容易來實現，這里就不多說了。下面錄制了一個視頻供大家欣賞。這樣我們就能更清楚的知道這個部門下的員工和哪個部門下的員工有業務往來關系了。下圖是一個gif圖片，下載有點慢，請耐心等待。
或者直接點擊看視頻：
想要demo的小伙伴們，給我們發郵件吧，我們會將完整代碼呈現給您。