The d3.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. Radial 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 radial layout.
xxxxxxxxxx<meta charset="utf-8"><style>.node circle { fill: #999;}.node text { font: 10px sans-serif;}.node--internal circle { fill: #555;}.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: #555; stroke-opacity: 1; stroke-width: 5.5px;}</style><svg width="960" height="2000"></svg><script src="https://d3js.org/d3.v4.min.js"></script><script>var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"), g = svg.append("g").attr("transform", "translate(40,0)"); var linkg= d3.linkHorizontal() .x(function(d){return d[0]}) .y(function(d){return d[1]})var data = { source: [100, 100], target: [300, 300]}console.log(linkg(data))svg.append("path").attr("fill","none").attr("class","link").attr("d",linkg(data))</script> https://d3js.org/d3.v4.min.js