Tree-shaped folding tree of d3.js

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.