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

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);
                }
            });
        }