首页 > 代码库 > 如何创建环型、树型双层布局

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

2024-07-23 08:36:39   211人阅读

TWaver的Demo中有常用的环型布局和树型布局，但是当网元数量较多，又不想zoomOverView,聪明的我们自然会想到使用双层布局，整体效果既不会显得很拥挤，也能刚好充满整个窗口，如下图的效果：


实现这样布局效果实现的步骤：
1.将link个数最多的Node作为圆点或顶点。
2.分别计算所有点的位置。
查找圆点或顶点的核心代码如下：

1var sizes = [];
2this.box.forEach(function (element) {
3    if (element instanceof  twaver.Node) {
4        sizes.push(element.getLinks().size());
5    }
6});
7 
8Array.max=function(array)
9{
10    return Math.max.apply(Math,array);
11}
12this.box.forEach(function(element){
13   if(element instanceof  twaver.Node){
14       if(Array.max(sizes) == element.getLinks().size()){
15           <a href=http://www.mamicode.com/‘http://twaver.servasoft.com/wp-content/uploads/2014/09/AutoLayoutDemo.html‘>AutoLayoutDemo</a>element.setClient(‘center‘,‘center‘);
16       }
17   }
18});

圆形布局核心代码如下：

1function 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 source
print?
1function 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        }

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


联系
我们