首页 > 代码库 > 如何创建环型、树型双层布局
如何创建环型、树型双层布局
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://www.mamicode.com/‘http://twaver.servasoft.com/wp-content/uploads/2014/09/AutoLayoutDemo.html‘>AutoLayoutDemoelement.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); } }); }
如何创建环型、树型双层布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。