Tree/dendrogram with elbow connectors in d3

Question

I\'m very new to d3.js (and SVG in general), and I want to do something simple: a tree/dendrogram with angled connectors.

I have cannibalised the d3 example from her

Answer 1

Replace the diagonal function with a custom path generator, using SVG's "H" and "V" path commands.

function elbow(d, i) {
  return "M" + d.source.y + "," + d.source.x
      + "V" + d.target.x + "H" + d.target.y;
}

Note that the source and target's coordinates (x and y) are swapped. This example displays the layout with a horizontal orientation, however the layout always uses the same coordinate system: x is the breadth of the tree, and y is the depth of the tree. So, if you want to display the tree with the leaf (bottommost) nodes on the right edge, then you need to swap x and y. That's what the diagonal's projection function does, but in the above elbow implementation I just hard-coded the behavior rather than using a configurable function.

As in:

svg.selectAll("path.link")
    .data(cluster.links(nodes))
  .enter().append("path")
    .attr("class", "link")
    .attr("d", elbow);

And a working example:

• http://bl.ocks.org/d/2429963/