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 |
} |