Tree-shaped layout of twaver HTML5

Blink of an eye the Spring festival holiday has already finished, as a professional procedure ape, do not know everyone has no such feeling, a day do not touch the computer, always feel life less what. Today is the third day after the spring Festival, to share our previous time a demand, the need is this: the interface of the network elements are divided into different domains, such as first-level domain, two-level domain, three-level domain, .... n-level domains, and there will be connections between different domains. For this requirement, according to the conventional idea, the use of group is not very simple, first-class domain is a group, the level two domain is a group, the two-level domain group is the first domain of the father, and so on. However, there is a problem, if the domain is more, will cause the group of excessive nesting, the interface after the group more, not only the user experience down, and will seriously affect performance, so rather than directly with the tree, can be very intuitive to reflect the hierarchical relationship between the various domains.

Here is the layout of the code, the code is very simple, I believe that people familiar with the twaver is easy to read.

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

You can add animations to the layout to enhance the user experience, and the documentation about the animations can be consulted:

function move (node, x, y) {    var x0=node.getclient (' x ');    var y0=node.getclient (' y ');    New Twaver. Animate ({from          : {x:x0, y:y0}, to          : {x:x, y:y},          type: ' point ',          delay:100,          dur:1000,          easing : ' Easenone ',          onupdate:function (value) {            node.setlocation (value.x, value.y);          }        }). Play ();         }

If you have a friend interested in this example, you can send an email to request the relevant code, email address: [Email protected]

Tree-shaped layout of twaver HTML5