Tree-shaped folding tree of d3.js

1. Effects

Children and _children

2. Technology decomposition

2.1 Folding function

(1) Recursive call, with descendants of the children (display) to _children (not shown) staged, easy to fold, function collapse (d) {    if (d.children) {  Console.log (d) ;        D._children = D.children;        D._children.foreach (collapse);        D.children = null;}    } Collapse each child of the root node Root.children.forEach (collapse);//To redraw update (root) after folding;

　　

2.2 Update the layout and output based on interactions

function Update (source) {//(2-1) calculates the layout of the new tree var nodes = tree.nodes (root). Reverse (), links = tree.links (nodes); (2-2) The depth of the tree is here the tree d.y.  The width of the tree is maximum 720, four layers, so each layer is multiplied by the Nodes.foreach (function (d) {d.y = d.depth * 180;//tree x, y inverted, so here y is actually horizontal}); (2-3) data connection, data binding according to ID var node = svg.selectall ("G.node"). Data (nodes, function (d) {return d.id//The node opened at the beginning of the new point is not Have ID | | (d.id = ++i);  Add an ID} for a node that does not have an ID); (2-4) Add new sub-node var nodeenter = Node.enter () when clicked. Append ("G"). attr ("Class", "Node"). attr ("Transform", function (d) {return "translate (" + Source.y0 + "," + source.x0 + ")";} ".  On ("Click", click); Nodeenter.append ("Circle"). attr ("R", 1e-6). Style ("Fill", function (d) {return d._children?). "Lightsteelblue": "#fff";  });      Nodeenter.append ("text"). attr ("X", function (d) {return D.children | | d._children? -10:10;}) . attr ("dy", ". 35em"). attr ("Text-anchor", function (d) {return D.children | | d._children? "End": "Start";  })    . text (function (d) {return d.name;})    . Style ("Fill-opacity", 1e-6); (2-5) The original node is updated to the new location var nodeupdate = Node.transition (). Duration (duration). attr ("Transform", function (d) {ret  Urn "translate (" + D.y + "," + d.x + ")";} "; Nodeupdate.select ("Circle"). attr ("R", 4.5). Style ("Fill", function (d) {return d._children?). "Lightsteelblue": "#fff";  });    Nodeupdate.select ("text"). Style ("Fill-opacity", 1); (2-6) The child node of the collapsed node shrinks back var nodeexit = Node.exit (). Transition (). Duration (duration). attr ("Transform", function (d        {return "translate" ("+ Source.y +", "+ source.x +") ";  }). Remove ();  Nodeexit.select ("Circle"). attr ("R", 1e-6);    Nodeexit.select ("text"). Style ("Fill-opacity", 1e-6); (2-7) data connection, according to the target Node ID binding data var link = svg.selectall ("Path.link"). Data (links, function (d) {return d.target.id;})    ; (2-8) Add New Connection Link.enter (). Insert ("Path", "G"). attr ("Class", "link"). attr ("D", functioN (d) {var o = {x:source.x0, y:source.y0};      Return diagonal ({source:o, target:o});    });    (2-9) Original connection update location Link.transition (). Duration (duration). attr ("D", diagonal); (2-10) Collapse the link, shrink to the source node Link.exit (). Transition (). Duration (duration). attr ("D", function (d) {var o = {x        : Source.x, Y:SOURCE.Y};      Return diagonal ({source:o, target:o});  }). Remove ();    Save the old position for transition Nodes.foreach (function (d) {d.x0 = d.x;  D.y0 = D.y; });}

Toggle collapse at 2.3 clicks

(3) Toggle folding or not function click (d) {  if (d.children) {    d._children = D.children;    D.children = null;  } else {    D.children = D._children;    D._children = null;  }  Update (d);//re-render}

3. Complete code

<! DOCTYPE html></script>
</body>
　　
Tree-shaped folding tree of d3.js