How to create a ring and tree layout

Twaver's demo has common ring layout and tree layout, but when there are a large number of network elements and we don't want zoomoverview, we naturally think of double-layer layout, the overall effect is neither very crowded nor full of the entire window, as shown in the following figure:


Steps to achieve this layout effect:
1. Use the node with the most links as a dot or vertex.
2. Calculate the locations of each vertex.
The core code for finding dots or vertices is as follows:

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

 

The core code of circular layout is as follows:

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; // obtain the window height if (window. innerheight) winheight = Window. innerheight; else if (document. body) & (document. body. clientheight) winheight = document. bo Dy. clientheight; var centerx = winwidth/2; // Center Coordinate var centery = winheight/2; var radius = 0; // radius 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 );}});}

 

 

Core code of tree layout:

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; // obtain the window height if (window. innerheight) winheight = Window. innerheight; else if (document. body) & (document. body. clientheight) winheight = document. bo Dy. clientheight; var centerx = winwidth/2; // Center Coordinate var centery = winheight/2; var radius = 0; // radius 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 );}});}

 

 

How to create a ring and tree layout