标签：twaver 布局 link twaver mono design
TWaver的Demo中有常用的环型布局和树型布局，但是当网元数量较多，又不想zoomOverView,聪明的我们自然会想到使用双层布局，整体效果既不会显得很拥挤，也能刚好充满整个窗口，如下图的效果：
实现这样布局效果实现的步骤：
1.将link个数最多的Node作为圆点或顶点。
2.分别计算所有点的位置。
查找圆点或顶点的核心代码如下：
1 |
var
sizes = []; |
2 |
this.box.forEach(function
(element) { |
3 |
if (element instanceof twaver.Node)
{ |
4 |
sizes.push(element.getLinks().size()); |
5 |
} |
6 |
}); |
7 |
8 |
Array.max=function(array) |
9 |
{ |
10 |
return Math.max.apply(Math,array); |
11 |
} |
12 |
this.box.forEach(function(element){ |
13 |
if(element instanceof twaver.Node){ |
14 |
if(Array.max(sizes)
== element.getLinks().size()){ |
15 |
<a
href=‘http://twaver.servasoft.com/wp-content/uploads/2014/09/AutoLayoutDemo.html‘>AutoLayoutDemo</a>element.setClient(‘center‘,‘center‘); |
16 |
} |
17 |
} |
18 |
}); |
圆形布局核心代码如下：
1 |
function
roundLayout() { |
2 |
var
datas = box.getDatas().toArray(); |
3 |
var
size = box.getDatas().toArray().length; |
4 |
if (window.innerWidth) |
5 |
winWidth
= window.innerWidth; |
6 |
else if ((document.body)
&& (document.body.clientWidth)) |
7 |
winWidth
= document.body.clientWidth; |
8 |
//
获取窗口高度 |
9 |
if (window.innerHeight) |
10 |
winHeight
= window.innerHeight; |
11 |
else if ((document.body)
&& (document.body.clientHeight)) |
12 |
winHeight
= document.body.clientHeight; |
13 |
var
centerX = winWidth / 2;//圆心坐标 |
14 |
var
centerY = winHeight / 2; |
15 |
var
radius = 0;//半径 |
16 |
var
N = 0; //total
number of node |
17 |
18 |
box.forEach(function
(data) { |
19 |
if (data.getClient(‘center‘)
!== undefined) { |
20 |
data.setCenterLocation(centerX,
centerY); |
21 |
} |
22 |
if (data instanceof twaver.Node
&& data.getClient(‘center‘)
== undefined) { |
23 |
N++; |
24 |
} |
25 |
}); |
26 |
27 |
var
c = getCRound(N); |
28 |
var
i = 0; |
29 |
var
n = parseInt(N / c); |
30 |
radius
= network.viewRect.height / 2 /
c - 30 /
c; |
31 |
if (box.getClient("radius"))
{ |
32 |
radius
= parseInt(box.getClient("radius")); |
33 |
} |
34 |
box.forEach(function
(data) { |
35 |
if (data instanceof twaver.Node
&& data.getClient(‘center‘)
== undefined) { |
36 |
var
e = parseInt(i / n); |
37 |
var
x = centerX + (radius * Math.pow(1.5,
e) * Math.cos(Math.PI * 2 /
n * i + 0.2 *
e)); |
38 |
var
y = centerY + (radius * Math.pow(1.5,
e) * Math.sin(Math.PI * 2 /
n * i + 0.2 *
e)); |
39 |
i++; |
40 |
data.setCenterLocation(x,
y); |
41 |
data.setClient(‘level‘,
e); |
42 |
} |
43 |
}); |
44 |
} |
树型布局核心代码：
1 |
function
roundLayout() { |
2 |
var
datas = box.getDatas().toArray(); |
3 |
var
size = box.getDatas().toArray().length; |
4 |
if (window.innerWidth) |
5 |
winWidth
= window.innerWidth; |
6 |
else if ((document.body)
&& (document.body.clientWidth)) |
7 |
winWidth
= document.body.clientWidth; |
8 |
//
获取窗口高度 |
9 |
if (window.innerHeight) |
10 |
winHeight
= window.innerHeight; |
11 |
else if ((document.body)
&& (document.body.clientHeight)) |
12 |
winHeight
= document.body.clientHeight; |
13 |
var
centerX = winWidth / 2;//圆心坐标 |
14 |
var
centerY = winHeight / 2; |
15 |
var
radius = 0;//半径 |
16 |
var
N = 0; //total
number of node |
17 |
18 |
box.forEach(function
(data) { |
19 |
if (data.getClient(‘center‘)
!== undefined) { |
20 |
data.setCenterLocation(centerX,
centerY); |
21 |
} |
22 |
if (data instanceof twaver.Node
&& data.getClient(‘center‘)
== undefined) { |
23 |
N++; |
24 |
} |
25 |
}); |
26 |
27 |
var
c = getCRound(N); |
28 |
var
i = 0; |
29 |
var
n = parseInt(N / c); |
30 |
radius
= network.viewRect.height / 2 /
c - 30 /
c; |
31 |
if (box.getClient("radius"))
{ |
32 |
radius
= parseInt(box.getClient("radius")); |
33 |
} |
34 |
box.forEach(function
(data) { |
35 |
if (data instanceof twaver.Node
&& data.getClient(‘center‘)
== undefined) { |
36 |
var
e = parseInt(i / n); |
37 |
var
x = centerX + (radius * Math.pow(1.5,
e) * Math.cos(Math.PI * 2 /
n * i + 0.2 *
e)); |
38 |
var
y = centerY + (radius * Math.pow(1.5,
e) * Math.sin(Math.PI * 2 /
n * i + 0.2 *
e)); |
39 |
i++; |
40 |
data.setCenterLocation(x,
y); |
41 |
data.setClient(‘level‘,
e); |
42 |
} |
43 |
}); |
44 |
} |
标签：twaver 布局 link twaver mono design
原文地址：http://blog.csdn.net/twaver/article/details/39395253
