| license: mit |
This is a d3.js tree diagram that incldes an interactive element as used as an example in the book D3 Tips and Tricks.
Any parent node can be clicked on to collapse the portion of the tree below it, on itself. Conversly, it can be clicked on again to regrow.
It is derived from the Mike Bostock Collapsible tree example but it is a slightly cut down version.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Tree Example</title> | |
| <style> | |
| .node { | |
| cursor: pointer; | |
| } | |
| .node circle { | |
| fill: #fff; | |
| stroke: steelblue; | |
| stroke-width: 3px; | |
| } | |
| .node text { | |
| font: 12px sans-serif; | |
| } | |
| .link { | |
| fill: none; | |
| stroke: #ccc; | |
| stroke-width: 2px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- load the d3.js library --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> | |
| <script> | |
| var treeData = [ | |
| { | |
| "name": "Top Level", | |
| "parent": "null", | |
| "children": [ | |
| { | |
| "name": "Level 2: A", | |
| "parent": "Top Level", | |
| "children": [ | |
| { | |
| "name": "Son of A", | |
| "parent": "Level 2: A" | |
| }, | |
| { | |
| "name": "Daughter of A", | |
| "parent": "Level 2: A" | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "Level 2: B", | |
| "parent": "Top Level" | |
| } | |
| ] | |
| } | |
| ]; | |
| // ************** Generate the tree diagram ***************** | |
| var margin = {top: 20, right: 120, bottom: 20, left: 120}, | |
| width = 960 - margin.right - margin.left, | |
| height = 500 - margin.top - margin.bottom; | |
| var i = 0, | |
| duration = 750, | |
| root; | |
| var tree = d3.layout.tree() | |
| .size([height, width]); | |
| var diagonal = d3.svg.diagonal() | |
| .projection(function(d) { return [d.y, d.x]; }); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.right + margin.left) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| root = treeData[0]; | |
| root.x0 = height / 2; | |
| root.y0 = 0; | |
| update(root); | |
| d3.select(self.frameElement).style("height", "500px"); | |
| function update(source) { | |
| // Compute the new tree layout. | |
| var nodes = tree.nodes(root).reverse(), | |
| links = tree.links(nodes); | |
| // Normalize for fixed-depth. | |
| nodes.forEach(function(d) { d.y = d.depth * 180; }); | |
| // Update the nodes… | |
| var node = svg.selectAll("g.node") | |
| .data(nodes, function(d) { return d.id || (d.id = ++i); }); | |
| // Enter any new nodes at the parent's previous position. | |
| var nodeEnter = node.enter().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 ? -13 : 13; }) | |
| .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); | |
| // Transition nodes to their new position. | |
| var nodeUpdate = node.transition() | |
| .duration(duration) | |
| .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); | |
| nodeUpdate.select("circle") | |
| .attr("r", 10) | |
| .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); | |
| nodeUpdate.select("text") | |
| .style("fill-opacity", 1); | |
| // Transition exiting nodes to the parent's new position. | |
| 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); | |
| // Update the links… | |
| var link = svg.selectAll("path.link") | |
| .data(links, function(d) { return d.target.id; }); | |
| // Enter any new links at the parent's previous position. | |
| 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}); | |
| }); | |
| // 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); | |
| } | |
| </script> | |
| </body> | |
| </html> |
I haven't done this myself, but a bit of a google indicates that there are some ways of accomplishing it. Try this for a start https://stackoverflow.com/questions/24784302/wrapping-text-in-d3
Thank you for your reply! I tried the solution you suggested, but it did not work, probably because I did not insert the code in the right line.
Okay, my second suggestion is to check out some of the examples in block builder for text wrapping and see if you can find one that matches the version of d3 you are using and the type of visualisation you are trying to implement. You can start here - https://blockbuilder.org/search?text=text+wrap&thumb=true
If that doesn't work, try raising a question in the d3 section on stack overflow here - https://stackoverflow.com/questions/tagged/d3.js
Best of luck.
Hi, is it possible to make this project compatible with latest D3 version? I tried https://d3js.org/d3.v5.min.js and it didn't work.
Thanks
Hi, is it possible to make this project compatible with latest D3 version? I tried https://d3js.org/d3.v5.min.js and it didn't work.
Thanks
Funny you should ask. I recently updated all the examples from the book into v5. Check this example out.
Hi, thanks for this great diagram! I was reading through the code + playing around with it on JSFiddle but am having trouble understanding how all the positioning is done. Is there a convenient way to rotate this visualization so I can represent a more hierarchical structure?
Hi, thanks for this great diagram! I was reading through the code + playing around with it on JSFiddle but am having trouble understanding how all the positioning is done. Is there a convenient way to rotate this visualization so I can represent a more hierarchical structure?
Sure! This example uses a pretty old version of d3. I reccomend changing to version 5 and you can find examples for a vertical layout from other examples here or you can get a full explanation of how the code works in the free book here
Hi, thanks for this great diagram! I was reading through the code + playing around with it on JSFiddle but am having trouble understanding how all the positioning is done. Is there a convenient way to rotate this visualization so I can represent a more hierarchical structure?
Sure! This example uses a pretty old version of d3. I reccomend changing to version 5 and you can find examples for a vertical layout from other examples here or you can get a full explanation of how the code works in the free book here
The eBook helped lots; got it working. Thank you!
Hi! I would like to use a slightly modified version of this code in my larger project (released under AGPL 3.0). What kind of notice should I add to the file? Who does hold the Copyright for example? It's released unser MIT license, right?
Hi! I would like to use a slightly modified version of this code in my larger project (released under AGPL 3.0). What kind of notice should I add to the file? Who does hold the Copyright for example? It's released unser MIT license, right?
Hi Sarah, This example is released under the MIT licience. As such you are free to use it under that model. I make no copyright claim and really don't want to restrict anyone from using it as it is a derivative of Mike Bostocks original work and ultimately, it's there to be used and to make the World a better place, not to be hoarded :-). Please use it with my blessing and thanks.
Hi! I would like to use a slightly modified version of this code in my larger project (released under AGPL 3.0). What kind of notice should I add to the file? Who does hold the Copyright for example? It's released unser MIT license, right?
Hi Sarah, This example is released under the MIT licience. As such you are free to use it under that model. I make no copyright claim and really don't want to restrict anyone from using it as it is a derivative of Mike Bostocks original work and ultimately, it's there to be used and to make the World a better place, not to be hoarded :-). Please use it with my blessing and thanks.
Great, thanks! :)
Hi, I am using your tree diagram, but as I have long text for level 3 of the tree I would wrap the text. But as I am just a beginner I don't know how to do it. Thanks!