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": "Production", | |
| "children": [ | |
| { | |
| "name": "London", | |
| "children": [ | |
| { | |
| "name": "TC2", | |
| "children": [ | |
| { | |
| "name": "app1", | |
| "children": [ | |
| {"name": "Liberator", "size": 3938}, | |
| {"name": "Transformer", "size": 3812}, | |
| {"name": "Bladerunner", "size": 6714}, | |
| {"name": "ICM Webapp", "size": 743} | |
| ] | |
| }, | |
| { | |
| "name": "app2", | |
| "children": [ | |
| {"name": "Baxter datasource", "size": 3534}, | |
| {"name": "Static datasource", "size": 5731}, | |
| {"name": "Blotter datasource", "size": 7840} | |
| ] | |
| }, | |
| { | |
| "name": "app3", | |
| "children": [ | |
| {"name": "D3 datasource", "size": 7074}, | |
| {"name": "ICM datasource", "size": 7074}, | |
| {"name": "Reuters datasource", "size": 7074}, | |
| {"name": "Artemis datasource", "size": 7074}, | |
| {"name": "Baxter adapter", "size": 7074}, | |
| {"name": "Cachedata translator", "size": 7074} | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "TC3", | |
| "children": [ | |
| { | |
| "name": "app1", | |
| "children": [ | |
| {"name": "Liberator", "size": 3938}, | |
| {"name": "Transformer", "size": 3812}, | |
| {"name": "Bladerunner", "size": 6714}, | |
| {"name": "ICM Webapp", "size": 743} | |
| ] | |
| }, | |
| { | |
| "name": "app2", | |
| "children": [ | |
| {"name": "Baxter datasource", "size": 3534}, | |
| {"name": "Static datasource", "size": 5731}, | |
| {"name": "Blotter datasource", "size": 7840} | |
| ] | |
| }, | |
| { | |
| "name": "app3", | |
| "children": [ | |
| {"name": "D3 datasource", "size": 7074}, | |
| {"name": "ICM datasource", "size": 7074}, | |
| {"name": "Reuters datasource", "size": 7074}, | |
| {"name": "Artemis datasource", "size": 7074}, | |
| {"name": "Baxter adapter", "size": 7074}, | |
| {"name": "Cachedata translator", "size": 7074} | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "LD4", | |
| "children": [ | |
| { | |
| "name": "app7", | |
| "children": [ | |
| {"name": "Artemis service", "size": 3938} | |
| ] | |
| }, | |
| { | |
| "name": "app8", | |
| "children": [ | |
| {"name": "Artemis service", "size": 3938} | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "Sydney", | |
| "children": [ | |
| { | |
| "name": "Kent", | |
| "children": [ | |
| { | |
| "name": "app1", | |
| "children": [ | |
| {"name": "Liberator", "size": 3938}, | |
| {"name": "Transformer", "size": 3812}, | |
| {"name": "Bladerunner", "size": 6714}, | |
| {"name": "ICM Webapp", "size": 743}, | |
| {"name": "Static datasource", "size": 5731}, | |
| {"name": "Blotter datasource", "size": 7840}, | |
| {"name": "Jolt Gateway", "size": 7840} | |
| ] | |
| }, | |
| { | |
| "name": "app2", | |
| "children": [ | |
| {"name": "Liberator", "size": 3938}, | |
| {"name": "Transformer", "size": 3812}, | |
| {"name": "Bladerunner", "size": 6714}, | |
| {"name": "ICM Webapp", "size": 743}, | |
| {"name": "Static datasource", "size": 5731}, | |
| {"name": "Blotter datasource", "size": 7840}, | |
| {"name": "Jolt Gateway", "size": 7840} | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "New York", | |
| "children": [ | |
| { | |
| "name": "NY4", | |
| "children": [ | |
| { | |
| "name": "app7", | |
| "children": [ | |
| {"name": "Artemis service", "size": 3938} | |
| ] | |
| }, | |
| { | |
| "name": "app8", | |
| "children": [ | |
| {"name": "Artemis service", "size": 3938} | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } |
| <!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="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var diameter = 960; | |
| var tree = d3.layout.tree() | |
| .size([360, diameter / 2 - 250]) | |
| .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) { | |
| if (error) throw error; | |
| 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> |
