如何创建环型、树型双层布局
TWaver的Demo中有常用的环型布局和树型布局,但是当网元数量较多,又不想zoomOverView,聪明的我们自然会想到使用双层布局,整体效果既不会显得很拥挤,也能刚好充满整个窗口,如下图的效果:
实现这样布局效果实现的步骤:
1.将link个数最多的Node作为圆点或顶点。
2.分别计算所有点的位置。
查找圆点或顶点的核心代码如下:
var sizes = []; this.box.forEach(function (element) { if (element instanceof twaver.Node) { sizes.push(element.getLinks().size()); } }); Array.max=function(array) { return Math.max.apply(Math,array); } this.box.forEach(function(element){ if(element instanceof twaver.Node){ if(Array.max(sizes) == element.getLinks().size()){ <a href='http://twaver.servasoft.com/wp-content/uploads/2014/09/AutoLayoutDemo.html'>AutoLayoutDemo</a>element.setClient('center', 'center'); } } });
圆形布局核心代码如下:
function roundLayout() { var datas = box.getDatas().toArray(); var size = box.getDatas().toArray().length; if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; // 获取窗口高度 if (window.innerHeight) winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; var centerX = winWidth / 2;//圆心坐标 var centerY = winHeight / 2; var radius = 0;//半径 var N = 0; //total number of node box.forEach(function (data) { if (data.getClient('center') !== undefined) { data.setCenterLocation(centerX, centerY); } if (data instanceof twaver.Node && data.getClient('center') == undefined) { N++; } }); var c = getCRound(N); var i = 0; var n = parseInt(N / c); radius = network.viewRect.height / 2 / c - 30 / c; if (box.getClient("radius")) { radius = parseInt(box.getClient("radius")); } box.forEach(function (data) { if (data instanceof twaver.Node && data.getClient('center') == undefined) { var e = parseInt(i / n); var x = centerX + (radius * Math.pow(1.5, e) * Math.cos(Math.PI * 2 / n * i + 0.2 * e)); var y = centerY + (radius * Math.pow(1.5, e) * Math.sin(Math.PI * 2 / n * i + 0.2 * e)); i++; data.setCenterLocation(x, y); data.setClient('level', e); } }); }
树型布局核心代码:
function roundLayout() { var datas = box.getDatas().toArray(); var size = box.getDatas().toArray().length; if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; // 获取窗口高度 if (window.innerHeight) winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; var centerX = winWidth / 2;//圆心坐标 var centerY = winHeight / 2; var radius = 0;//半径 var N = 0; //total number of node box.forEach(function (data) { if (data.getClient('center') !== undefined) { data.setCenterLocation(centerX, centerY); } if (data instanceof twaver.Node && data.getClient('center') == undefined) { N++; } }); var c = getCRound(N); var i = 0; var n = parseInt(N / c); radius = network.viewRect.height / 2 / c - 30 / c; if (box.getClient("radius")) { radius = parseInt(box.getClient("radius")); } box.forEach(function (data) { if (data instanceof twaver.Node && data.getClient('center') == undefined) { var e = parseInt(i / n); var x = centerX + (radius * Math.pow(1.5, e) * Math.cos(Math.PI * 2 / n * i + 0.2 * e)); var y = centerY + (radius * Math.pow(1.5, e) * Math.sin(Math.PI * 2 / n * i + 0.2 * e)); i++; data.setCenterLocation(x, y); data.setClient('level', e); } }); }