Last active
December 10, 2015 13:49
-
-
Save stephenhay/4443392 to your computer and use it in GitHub Desktop.
d3 test
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.2"></script> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.27.2"></script> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.27.2"></script> | |
| <style type="text/css"> | |
| .node circle { | |
| cursor: pointer; | |
| stroke: #3182bd; | |
| stroke-width: 1.5px; | |
| } | |
| .node text { | |
| font: 10px sans-serif; | |
| pointer-events: none; | |
| } | |
| line.link { | |
| fill: none; | |
| stroke: #9ecae1; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| <ul> | |
| <li>One | |
| <ul><li>Sub-one</li></ul> | |
| </li> | |
| <li>Two</li> | |
| <li>Three</li> | |
| </ul> | |
| <script type="text/javascript"> | |
| var w = 960, | |
| h = 500, | |
| root; | |
| var force = d3.layout.force() | |
| .linkDistance(80) | |
| .charge(-120) | |
| .gravity(.05) | |
| .size([w, h]); | |
| var vis = d3.select("#chart").append("svg:svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| var nodes = d3.selectAll("li")[0], | |
| links = nodes.slice(1).map(function(d) { | |
| return {source: d, target: d.parentNode.parentNode}; | |
| }); | |
| function update() { | |
| var nodes = flatten(root), | |
| links = d3.layout.tree().links(nodes); | |
| // Restart the force layout. | |
| force | |
| .nodes(nodes) | |
| .links(links) | |
| .start(); | |
| // Update the links… | |
| var link = vis.selectAll("line.link") | |
| .data(links, function(d) { return d.target.id; }); | |
| // Enter any new links. | |
| link.enter().insert("svg:line", ".node") | |
| .attr("class", "link") | |
| .attr("x1", function(d) { return d.source.x; }) | |
| .attr("y1", function(d) { return d.source.y; }) | |
| .attr("x2", function(d) { return d.target.x; }) | |
| .attr("y2", function(d) { return d.target.y; }); | |
| // Exit any old links. | |
| link.exit().remove(); | |
| // Update the nodes… | |
| var node = vis.selectAll("g.node") | |
| .data(nodes, function(d) { return d.id; }) | |
| node.select("circle") | |
| .style("fill", color); | |
| // Enter any new nodes. | |
| var nodeEnter = node.enter().append("svg:g") | |
| .attr("class", "node") | |
| .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) | |
| .on("click", click) | |
| .call(force.drag); | |
| nodeEnter.append("svg:circle") | |
| .attr("r", function(d) { return Math.sqrt(d.size) / 10 || 4.5; }) | |
| .style("fill", color); | |
| nodeEnter.append("svg:text") | |
| .attr("text-anchor", "middle") | |
| .attr("dy", ".35em") | |
| .text(function(d) { return d.name; }); | |
| // Exit any old nodes. | |
| node.exit().remove(); | |
| // Re-select for update. | |
| link = vis.selectAll("line.link"); | |
| node = vis.selectAll("g.node"); | |
| force.on("tick", function() { | |
| link.attr("x1", function(d) { return d.source.x; }) | |
| .attr("y1", function(d) { return d.source.y; }) | |
| .attr("x2", function(d) { return d.target.x; }) | |
| .attr("y2", function(d) { return d.target.y; }); | |
| node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); | |
| }); | |
| } | |
| // Color leaf nodes orange, and packages white or blue. | |
| function color(d) { | |
| return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c"; | |
| } | |
| // Toggle children on click. | |
| function click(d) { | |
| if (d.children) { | |
| d._children = d.children; | |
| d.children = null; | |
| } else { | |
| d.children = d._children; | |
| d._children = null; | |
| } | |
| update(); | |
| } | |
| // Returns a list of all nodes under the root. | |
| function flatten(root) { | |
| var nodes = [], i = 0; | |
| function recurse(node) { | |
| if (node.children) node.children.forEach(recurse); | |
| if (!node.id) node.id = ++i; | |
| nodes.push(node); | |
| } | |
| recurse(root); | |
| return nodes; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment