创建环型、树型双层布局

[java]代码库

实现这样布局效果实现的步骤：
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
        }
树型布局核心代码：

view sourceprint?
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
        }