TWaver HTML5之树形布局

function layoutRing(){//setup all group rings.var groups={};box.forEach(function(data){if(data instanceof twaver.Node){var node=data;node.setClient('x', node.getLocation().x);node.setClient('y', node.getLocation().y);var groupName=data.getClient('group');if(!groups[groupName]){groups[groupName]=[];}var rings=groups[groupName];var level=parseInt(node.getClient('level'));if(rings.length<=level){rings.push([]);}var ring=rings[level];ring.push(node);}});cleanConnections();layouter.doLayout('topbottom');for(var groupName in groups){//get this group bounds.var x1=undefined, y1=undefined, x2=undefined, y2=undefined;var rings=groups[groupName];for(var level=0;level<rings.length; level++){var ring=rings[level];for(var index=0;index<ring.length;index++){var node=ring[index];x1=x1 ? Math.min(x1, node.getLocation().x) : node.getLocation().x;y1=y1 ? Math.min(y1, node.getLocation().y) : node.getLocation().y;x2=x2 ? Math.max(x2, node.getLocation().x) : node.getLocation().x;y2=y2 ? Math.max(y2, node.getLocation().y) : node.getLocation().y;var target=box.getDatas().get(Math.floor(Math.random()*box.size()));if(target instanceof twaver.Node && target!==node){var connection=new twaver.Link(node, target);connection.setStyle('link.width',0.2);connection.setStyle('link.color', '#aaaaaa');connection.setClient('connection',true);connection.setClient('angle', (target.getClient('angle')+node.getClient('angle'))/2);box.add(connection);}}}var width=x2-x1;var height=y2-y1;//layout each ring for this group.for(var level=0;level<rings.length; level++){var ring=rings[level];for(var index=0;index<ring.length;index++){var node=ring[index];var radius=node.getLocation().y-y1;var range=Math.PI*2;var angle=(node.getLocation().x-x1)/width * range;if(level>1 && (level==rings.length-1 || rings.length<4)){angle=node.getParent().getClient('angle')+(angle-node.getParent().getClient('angle'))/3;}var x=radius*Math.cos(angle);var y=radius*Math.sin(angle);node.setLocation(node.getClient('x'),node.getClient('y'));node.setClient('angle', angle);move(node, x, y);}}}}

,接受失败,是我们不常听到或看到的一个命题,我们大都接受的是正面的教育,

TWaver HTML5之树形布局

相关文章:

你感兴趣的文章:

标签云: