Last active
July 19, 2017 19:20
-
-
Save ravi4j/861e8a3959bf86a306bbedc55718394b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Reference https://bl.ocks.org/mbostock/raw/999346/ --> | |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style></style> | |
| <body> | |
| <link rel="stylesheet" type="text/css" href="mystyle.css"> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script src="myJs.js"></script> | |
| <script> | |
| myMove(); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function myMove() { | |
| var width = 960, | |
| height = 500; | |
| var tree = d3.layout.tree() | |
| .size([width - 20, height - 20]); | |
| var root = {}, | |
| nodes = tree(root); | |
| root.parent = root; | |
| root.px = root.x; | |
| root.py = root.y; | |
| var diagonal = d3.svg.diagonal(); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(10,10)"); | |
| var node = svg.selectAll(".node"), | |
| link = svg.selectAll(".link"); | |
| var duration = 750, | |
| timer = setInterval(update, duration); | |
| function update() { | |
| if (nodes.length >= 500) return clearInterval(timer); | |
| // Add a new node to a random parent. | |
| var n = {id: nodes.length}, | |
| p = nodes[Math.random() * nodes.length | 0]; | |
| if (p.children) p.children.push(n); else p.children = [n]; | |
| nodes.push(n); | |
| // Recompute the layout and data join. | |
| node = node.data(tree.nodes(root), function(d) { return d.id; }); | |
| link = link.data(tree.links(nodes), function(d) { return d.source.id + "-" + d.target.id; }); | |
| // Add entering nodes in the parent’s old position. | |
| node.enter().append("circle") | |
| .attr("class", "node") | |
| .attr("r", 4) | |
| .attr("cx", function(d) { return d.parent.px; }) | |
| .attr("cy", function(d) { return d.parent.py; }); | |
| // Add entering links in the parent’s old position. | |
| link.enter().insert("path", ".node") | |
| .attr("class", "link") | |
| .attr("d", function(d) { | |
| var o = {x: d.source.px, y: d.source.py}; | |
| return diagonal({source: o, target: o}); | |
| }); | |
| // Transition nodes and links to their new positions. | |
| var t = svg.transition() | |
| .duration(duration); | |
| t.selectAll(".link") | |
| .attr("d", diagonal); | |
| t.selectAll(".node") | |
| .attr("cx", function(d) { return d.px = d.x; }) | |
| .attr("cy", function(d) { return d.py = d.y; }); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: lightblue; | |
| } | |
| .node { | |
| stroke: #fff; | |
| stroke-width: 2px; | |
| } | |
| .link { | |
| fill: none; | |
| stroke: #000; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment