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 |
}
|
相关推荐
网络拓扑结构大全和图片星型总线型环型树型分布式网状拓扑结构.doc
网络拓扑结构大全和图片星型总线型环型树型分布式网状拓扑结构.pdf网络拓扑结构大全和图片星型总线型环型树型分布式网状拓扑结构.pdf网络拓扑结构大全和图片星型总线型环型树型分布式网状拓扑结构.pdf网络拓扑结构...
tre 创建文件树型结构展示
网络拓扑结构大全和图片星型、总线型、环型、树型、分布式、网状拓扑结构.doc
网络拓扑结构大全和图片(星型、总线型、环型、树型、分布式、网状拓扑结构
网络拓扑结构大全和图片(星型、总线型、环型、树型、分布式、网状拓扑结构)[整理].pdf
树型论坛树型论坛树型论坛树型论坛树树型论坛型论坛树型论坛
js做的树型结构,应该是很好的,javascript作的树型结构javascript作的树型结构javascript作的树型结构javascript作的树型结构javascript作的树型结构javascript作的树型结构javascript作的树型结构javascript作的树型...
变色的树型控件 变色的树型控件 变色的树型控件
主要介绍了php创建无限级树型菜单 ,主要使用的是递归函数,感兴趣的小伙伴们可以参考一下
delphi7 树型控件 自动根据数据集生成树型结构
树型结构算法树型结构算法树型结构算法树型结构算法
pw7.3.2树型论坛
Javascript树型菜单
树型论坛下载-买料卖料论坛源码-php最新版树型论坛源码-全静态树型论坛程序-网投源码-网投程序-股票程序源码-手机注册程序源码-会员取料系统程序源码 演示地址:http://www.006670.com
jquery树型结构,jqeury简单例子
树型菜单树型菜单树型菜单
易语言源码易语言设置树型框连线颜色.rar 易语言源码易语言设置树型框连线颜色.rar 易语言源码易语言设置树型框连线颜色.rar 易语言源码易语言设置树型框连线颜色.rar 易语言源码易语言设置树型框连线颜色.rar ...
精美的ajax树型菜单;