Skip to content

Instantly share code, notes, and snippets.

@sbrreed

sbrreed/.block

Last active June 30, 2019 15:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sbrreed/06b6f1175109ba74bc6b056637637ef8 to your computer and use it in GitHub Desktop.
Save sbrreed/06b6f1175109ba74bc6b056637637ef8 to your computer and use it in GitHub Desktop.
Download ZIP
Tree diagram using flat data with v4- Commented
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.node text { font: 12px sans-serif; }
.node--internal text {
text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
</style>
<body>
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v4.min.js"></script>
<script>
//This uses the native D3 stratify and tree methods. Check out
//d3-hierarchy (https://github.com/d3/d3-hierarchy/blob/master/README.md)
// for more complicated hierarchical structures. This may be fully incorporated
// into v5: https://github.com/d3/d3/blob/master/CHANGES.md#hierarchies-d3-hierarchy
// the flat data
var flatData = [
{"name": "Top Level", "parent": null},
{"name": "Level 2: A", "parent": "Top Level" },
{"name": "Level 2: B", "parent": "Top Level" },
{"name": "Son of A", "parent": "Level 2: A" },
{"name": "Daughter of A", "parent": "Level 2: A" }
];
// convert the flat data into a hierarchy
// d3.stratify takes flat data and generates a hierarchy assigns the root and parent elements
var stratify = d3.stratify()
.id(function(d) { return d.name; }) // specifies that each root will come from a "name" property in the data
.parentId(function(d) { return d.parent; }); //specifies where to look for the parent of each root. The title "parent" in the data can be anything.
let treeData = stratify(flatData);
// assign the name to each node
// this seems redundant but without it the titles of each node don't
// show up. After assigning the ID of each node to be each of the "name"
// elements. The "name" of each ID has to then be reassigned.
treeData.each(function(d) {
d.name = d.id;
});
// assigns the data to a hierarchy using parent-child relationships
// d3.hierarchy takes in a dataset and an array of children.
// d.children cycles through each node in the tree and lists outs any children that exists
// or returns "undefined" if no children exist.
var nodes = d3.hierarchy(treeData, function(d) {
console.log("children", d.children);
return d.children;
});
//look at the difference between these two objects
console.log("flatData", flatData);
console.log("treeData", treeData);
//console.log("nodes", nodes);
// set the dimensions and margins of the diagram
var margin = {top: 20, right: 90, bottom: 30, left: 90},
width = 660 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// declares a tree layout and assigns the size
var treemap = d3.tree()
.size([height, width]);
// maps the node data to the tree layout
nodes = treemap(treeData);
// append the svg object to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom),
g = svg.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
console.log("nodes.descendants()", nodes.descendants());
console.log("nodes.descendants().slice(1)", nodes.descendants().slice(1));
// adds the links between the nodes
var link = g.selectAll(".link")
.data(nodes.descendants().slice(1)) //this returns all the nodes individually except the Top Level node
.enter().append("path")
.attr("class", "link")
.attr("d", function(d) {
return "M" + d.y + "," + d.x
+ "C" + (d.y + d.parent.y) / 2 + "," + d.x
+ " " + (d.y + d.parent.y) / 2 + "," + d.parent.x
+ " " + d.parent.y + "," + d.parent.x;
});
//Curves: see https://www.dashingd3js.com/svg-paths-and-d3js for a good explanation of what this
// returns and why. Also, try setting a breakpoint at line 106 and stepping through to see the string that is returned
// and to watch the lines being drawn
// adds each node as a group
var node = g.selectAll(".node")
.data(nodes.descendants())
.enter().append("g")
.attr("class", function(d) {
return "node" +
(d.children ? " node--internal" : " node--leaf"); })
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")"; }); //moves each node circle to the right location on the screen
// adds the circle to the node
node.append("circle")
.attr("r", 10);
// adds the text to the node
node.append("text")
.attr("dy", ".35em")
.attr("x", function(d) { return d.children ? -13 : 13; }) //moves the title over according to whether it has children
.style("text-anchor", function(d) {
return d.children ? "end" : "start"; })
.text(function(d) { return d.data.name; });
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment