如何创建环型、树型双层布局

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         }