Where is d3.svg.diagonal()?

Solution #1:

D3 version 4.9.0 introduced link shapes, which have the same functionality of the old d3.svg.diagonal in D3 v3.

According to the API:

The link shape generates a smooth cubic Bézier curve from a source point to a target point. The tangents of the curve at the start and end are either vertical, horizontal or radial.

There are three methods:

• d3.linkHorizontal()
• d3.linkVertical()
• d3.linkRadial()

So, for a collapsible tree like that one you linked, you define the path d attribute as:

.attr("d", d3.linkHorizontal()
    .x(function(d) { return d.y; })
    .y(function(d) { return d.x; }));

Demo:

Suppose you have an object with source and target, each one with x and y properties:

var data = {
  source: {
    x: 20,
    y: 10
  },
  target: {
    x: 280,
    y: 100
  }
};

First, you create the link generator:

var link = d3.linkHorizontal()
  .x(function(d) {
    return d.x;
  })
  .y(function(d) {
    return d.y;
  });

And then you can draw the path just by passing that data to the link generator:

.attr("d", link(data))

Here is the demo:

var svg = d3.select("svg");

var data = {
  source: {
    x: 20,
    y: 10
  },
  target: {
    x: 280,
    y: 100
  }
};

var link = d3.linkHorizontal()
  .x(function(d) {
    return d.x;
  })
  .y(function(d) {
    return d.y;
  });

svg.append("path")
  .attr("d", link(data))
  .style("fill", "none")
  .style("stroke", "darkslateblue")
  .style("stroke-width", "4px");

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

Solution #2:

See GitHub issue here.

While the issue is still open, it doesn’t seem that Mr. Bostock is in a rush to re-implement it in version 4. Why? Because it’s trivial to implement yourself:

function link(d) {
  return "M" + d.source.y + "," + d.source.x
      + "C" + (d.source.y + d.target.y) / 2 + "," + d.source.x
      + " " + (d.source.y + d.target.y) / 2 + "," + d.target.x
      + " " + d.target.y + "," + d.target.x;
}

Solution #3:

I had a really hard time with this and then after a couple of hours, I realized how easy it really is (just like everyone else that mentions it). Replace:

var diagonal = d3.svg.diagonal()
  .projection(function(d) { return [d.y, d.x]; });

…with this:

var diagonal = function link(d) {
  return "M" + d.source.y + "," + d.source.x
      + "C" + (d.source.y + d.target.y) / 2 + "," + d.source.x
      + " " + (d.source.y + d.target.y) / 2 + "," + d.target.x
      + " " + d.target.y + "," + d.target.x;
};

That should be the only change. Hope this helps anyone else. This should work with a visualization like Patrick Brockman’s Collapsible/Searchable Tree.

Solution #4:

For those with vertical trees, the function below will yield curved diagonals such as shown in this example.

This function was modified from Mark’s answer by (1) switching the x and y calls, and (2) changing the calculated coordinates in the two middle lines. Without the coordinate change, the curve is inverted such as in this post.

var diagonal = function link(d) {
  return "M" + d.source.x + "," + d.source.y
      + "C" + d.source.x + "," + (d.source.y + d.target.y) / 2
      + " " + d.target.x + "," + (d.source.y + d.target.y) / 2
      + " " + d.target.x + "," + d.target.y;
};

As a side note, you can replace "C" with " " if you want boxy, instead of curved, edges.