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