d3-tree-all-pretty

by thomas_rickard

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="800" height="500"></svg>

CSS

.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: 0.4;
  stroke-width: 1.5px;
}

JavaScript

var data = {
  "name": "Root",
  "children": [{
    "name": "Branch 1"
  }, {
    "name": "Branch 2",
    "children": [{
      "name": "Branch 2.1"
    }, {
      "name": "Branch 2.2",
      "children": [{
        "name": "Branch 2.2.1"
      }, {
        "name": "Branch 2.2.2"
      }]
    }]
  }, {
    "name": "Branch 3"
  }, {
    "name": "Branch 4",
    "children": [{
      "name": "Branch 4.1"
    }, {
      "name": "Branch 4.2"
    }]
  }, {
    "name": "Branch 5"
  }]
};

// Get main SVG element and width + height attributes
var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height"),
  g = svg.append("g").attr("transform", "translate(40,0)");

// Convert data for a tree layout
var root = d3.hierarchy(data)
var tree = d3.tree()
  .size([height, width - 160]);
tree(root);

// Create links
var link = g.selectAll(".link")
  .data(root.descendants().slice(1))
  .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;
  });

// Create nodes
var node = g.selectAll(".node")
  .data(root.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 + ")";
  })

node.append("circle")
  .attr("r", 2.5);

node.append("text")
  .attr("dy", 3)
  .attr("x", function(d) {
    return d.children ? -10 : 10;
  })
  .style("text-anchor", function(d) {
    return d.children ? "end" : "start";
  })
  .text(function(d) {
    return d.data.name
  });