如何创建环型、树型双层布局
程序员文章站
2024-01-29 08:59:16
...
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 |
}
|