This is a d3 Reingold Tilford collapsible tree (inboth directions) with links and images all added dynamically. Basically equivalent to this fixed with a little help from here and new features added in from this and this ##As I said nothing I've done is new, I've just strung together a bunch of simple readily available resources but, since I needed to do it so I figured I'd save someone else the time of figuring it out. p.s. All images and URLs are random.
Last active
December 19, 2015 22:18
-
-
Save mijoharas/6025921 to your computer and use it in GitHub Desktop.
d3_tree
This file contains hidden or 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> | |
| <style> | |
| .node { | |
| cursor: pointer; | |
| } | |
| .node circle { | |
| fill: #fff; | |
| stroke: steelblue; | |
| stroke-width: 1.5px; | |
| } | |
| .node text { | |
| font: 10px sans-serif; | |
| } | |
| .link { | |
| fill: none; | |
| stroke: #ccc; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.2"></script> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| <script type="text/javascript"> | |
| var w = 960, | |
| h = 2000, | |
| i = 0, | |
| duration = 500, | |
| root; | |
| var tree = d3.layout.tree() | |
| .size([h, w - 160]); | |
| var diagonal = d3.svg.diagonal() | |
| .projection(function(d) { return [d.y, d.x]; }); | |
| var vis = d3.select("body").append("svg:svg") | |
| .attr("width", w) | |
| .attr("height", h) | |
| .append("svg:g") | |
| .attr("transform", "translate(40,0)"); | |
| d3.json("json_test.json", function(json) { | |
| root = json; | |
| json.x0 = 800; | |
| json.y0 = 0; | |
| function collapse(d) { | |
| if (d.children) { | |
| d._children = d.children; | |
| d._children.forEach(collapse); | |
| d.children = null; | |
| } | |
| } | |
| root.children.forEach(collapse); | |
| update(root); | |
| }); | |
| function update(source) { | |
| // Compute the new tree layout. | |
| var nodes = tree.nodes(root).reverse(); | |
| // console.log(nodes) | |
| // Update the nodes… | |
| var node = vis.selectAll("g.node") | |
| .data(nodes, function(d) { return d.id || (d.id = ++i); }); | |
| var nodeEnter = node.enter().append("svg:g") | |
| .attr("class", "node") | |
| .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }); | |
| //.style("opacity", 1e-6); | |
| // Enter any new nodes at the parent's previous position. | |
| nodeEnter.append("svg:circle") | |
| //.attr("class", "node") | |
| //.attr("cx", function(d) { return source.x0; }) | |
| //.attr("cy", function(d) { return source.y0; }) | |
| .attr("r", 4.5) | |
| .style("fill", function(d) { console.log(d._children); return d._children ? "lightsteelblue" : "#fff"; }) | |
| .on("click", click); | |
| nodeEnter.append("svg:a").attr("xlink:href", function(d) { return d.link; }) | |
| .append("svg:text") | |
| .attr("x", function(d) { return (d._children ? -10 : 10); }) | |
| .attr("y", 3) | |
| .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) | |
| //.attr("fill","#ccc") | |
| //.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) | |
| .text(function(d) { return d.name; }); | |
| // Add images | |
| nodeEnter.append("svg:image") | |
| .attr("class", "circle") | |
| .attr("xlink:href", function(d){ | |
| return d.gravatar; | |
| }) | |
| .attr("x", -8) | |
| .attr("y", -8) | |
| .attr("width", 16) | |
| .attr("height", 16) | |
| .on("click", click); | |
| // Transition nodes to their new position. | |
| nodeEnter.transition() | |
| .duration(duration) | |
| .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) | |
| .style("opacity", 1) | |
| .select("circle"); | |
| //.attr("cx", function(d) { return d.x; }) | |
| //.attr("cy", function(d) { return d.y; }) | |
| node.transition() | |
| .duration(duration) | |
| .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) | |
| .style("opacity", 1); | |
| node.exit().transition() | |
| .duration(duration) | |
| .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) | |
| .style("opacity", 1e-6) | |
| .remove(); | |
| /* | |
| var nodeTransition = node.transition() | |
| .duration(duration); | |
| nodeTransition.select("circle") | |
| .attr("cx", function(d) { return d.y; }) | |
| .attr("cy", function(d) { return d.x; }) | |
| .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); | |
| nodeTransition.select("text") | |
| .attr("dx", function(d) { return d._children ? -8 : 8; }) | |
| .attr("dy", 3) | |
| .style("fill", function(d) { return d._children ? "lightsteelblue" : "#5babfc"; }); | |
| // Transition exiting nodes to the parent's new position. | |
| var nodeExit = node.exit(); | |
| nodeExit.select("circle").transition() | |
| .duration(duration) | |
| .attr("cx", function(d) { return source.y; }) | |
| .attr("cy", function(d) { return source.x; }) | |
| .remove(); | |
| nodeExit.select("text").transition() | |
| .duration(duration) | |
| .remove(); | |
| */ | |
| // Update the links… | |
| var link = vis.selectAll("path.link") | |
| .data(tree.links(nodes), function(d) { return d.target.id; }); | |
| // Enter any new links at the parent's previous position. | |
| link.enter().insert("svg:path", "g") | |
| .attr("class", "link") | |
| .attr("d", function(d) { | |
| var o = {x: source.x0, y: source.y0}; | |
| return diagonal({source: o, target: o}); | |
| }) | |
| .transition() | |
| .duration(duration) | |
| .attr("d", diagonal); | |
| // Transition links to their new position. | |
| link.transition() | |
| .duration(duration) | |
| .attr("d", diagonal); | |
| // Transition exiting nodes to the parent's new position. | |
| link.exit().transition() | |
| .duration(duration) | |
| .attr("d", function(d) { | |
| var o = {x: source.x, y: source.y}; | |
| return diagonal({source: o, target: o}); | |
| }) | |
| .remove(); | |
| // Stash the old positions for transition. | |
| nodes.forEach(function(d) { | |
| d.x0 = d.x; | |
| d.y0 = d.y; | |
| }); | |
| } | |
| // 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(d); | |
| } | |
| d3.select(self.frameElement).style("height", "2000px"); | |
| </script> |
This file contains hidden or 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
| {"name":"root", | |
| "children":[ | |
| {"name":"hello","link":"http://www.google.com", | |
| "children":[ | |
| {"name":"Global Applications Orchestrator","link":"http://www.facebook.com", | |
| "children":[ | |
| {"name":"Random string 42","size":1000,"link":"http://www.twitter.com", | |
| "children":[ | |
| {"name":"Webster Crona","size":1000,"gravatar":"http://d24w6bsrhbeh9d.cloudfront.net/photo/arp4dWB_460s.jpg","link":"http://www.imdb.com"}]}, | |
| {"name":"Xavier Rau","size":1000,"gravatar":"http://d24w6bsrhbeh9d.cloudfront.net/photo/aWZWdpn_460s.jpg","link":"http://www.projecteuler.net"}]}, | |
| {"name":"Example User","size":1000,"gravatar":"http://d24w6bsrhbeh9d.cloudfront.net/photo/ab5yRxE_460s.jpg","link":"http://www.stackoverflow.com"}]}, | |
| {"name":"Elise McKenzie","size":1000,"gravatar":"http://d24w6bsrhbeh9d.cloudfront.net/photo/aqmNdRQ_460s.jpg","link":"http://www.github.com"}, | |
| {"name":"Nedra Olson V","size":1000,"gravatar":"http://d24w6bsrhbeh9d.cloudfront.net/photo/aVOW4XO_460s.jpg","link":"http://www.heroku.com"}, | |
| {"name":"Mike","size":1000,"gravatar":"http://d24w6bsrhbeh9d.cloudfront.net/photo/aEw1XOx_700b.jpg","link":"http://bl.ocks.org"} | |
| ]} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment