The tree layout implements the Reingold-Tilford algorithm for efficient, tidy arrangement of layered nodes. The depth of nodes is computed by distance from the root, leading to a ragged appearance. Cartesian orientations are also supported. Implementation based on work by Jeff Heer and Jason Davies using Buchheim et al.'s linear-time variant of the Reingold-Tilford algorithm. Data shows the Flare class hierarchy, also courtesy Jeff Heer.
Compare to this Cartesian layout.
| {"name": "B-text", | |
| "children": [ | |
| {"name": "Visio", | |
| "children": [ | |
| {"name": "Dream 1-Holy Church and Lady Meed", | |
| "children": [ | |
| {"name": "Prologue" | |
| }, | |
| {"name": "Passus 1" | |
| }, | |
| {"name": "Passus 2" | |
| }, | |
| {"name": "Passus 3" | |
| }, | |
| {"name": "Passus 4" | |
| } | |
| ] | |
| }, | |
| {"name": "Dream 2-Pilgrimage to Truth", | |
| "children": [ | |
| {"name": "Passus 5" | |
| }, | |
| {"name": "Passus 6" | |
| }, | |
| {"name": "Passus 7" | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| {"name": "Vitae de Dowel, Dobet, and Dobest", | |
| "children": [ | |
| {"name":"Dowel", | |
| "children": [ | |
| {"name": "Dream 3-Search for Dowel", | |
| "children": [ | |
| {"name": "Passus 8" | |
| }, | |
| {"name": "Passus 9" | |
| }, | |
| {"name": "Passus 10" | |
| }, | |
| {"name": "Inner Dream i", | |
| "children": [ | |
| {"name": "Passus 11"} | |
| ] | |
| }, | |
| {"name": "Passus 12" | |
| } | |
| ] | |
| }, | |
| {"name": "Dream 5-Patience", | |
| "children": [ | |
| {"name": "Passus 13" | |
| }, | |
| {"name": "Passus 14" | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| {"name": "Dobet", | |
| "children": [ | |
| {"name": "Dream 6-Charity", | |
| "children": [ | |
| {"name": "Passus 15" | |
| }, | |
| {"name": "Inner Dream ii", | |
| "children": [ | |
| {"name": "Passus 16"} | |
| ] | |
| }, | |
| {"name": "Passus 17" | |
| } | |
| ] | |
| }, | |
| {"name": "Dream 8-Passion", | |
| "children": [ | |
| {"name": "Passus 18"} | |
| ] | |
| } | |
| ] | |
| }, | |
| {"name": "Dobest", | |
| "children": [ | |
| {"name": "Dream 9-The Church", | |
| "children": [ | |
| {"name": "Passus 19"} | |
| ] | |
| }, | |
| {"name": "Dream 10-Apocalypse", | |
| "children": [ | |
| {"name": "Passus 20"} | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .node circle { | |
| fill: #fff; | |
| stroke: steelblue; | |
| stroke-width: 1.5px; | |
| } | |
| .node { | |
| font: 10px sans-serif; | |
| } | |
| .link { | |
| fill: none; | |
| stroke: #ccc; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var diameter = 960; | |
| var tree = d3.layout.tree() | |
| .size([360, diameter / 2 - 120]) | |
| .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; }); | |
| var diagonal = d3.svg.diagonal.radial() | |
| .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; }); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", diameter) | |
| .attr("height", diameter - 150) | |
| .append("g") | |
| .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")"); | |
| d3.json("flare.json", function(error, root) { | |
| var nodes = tree.nodes(root), | |
| links = tree.links(nodes); | |
| var link = svg.selectAll(".link") | |
| .data(links) | |
| .enter().append("path") | |
| .attr("class", "link") | |
| .attr("d", diagonal); | |
| var node = svg.selectAll(".node") | |
| .data(nodes) | |
| .enter().append("g") | |
| .attr("class", "node") | |
| .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) | |
| node.append("circle") | |
| .attr("r", 4.5); | |
| node.append("text") | |
| .attr("dy", ".31em") | |
| .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; }) | |
| .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; }) | |
| .text(function(d) { return d.name; }); | |
| }); | |
| d3.select(self.frameElement).style("height", diameter - 150 + "px"); | |
| </script> |
