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

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

}

树型布局核心代码：

view source

print ?

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

}