tree and gradient

Using Plot.tree with a gradient stroke fails on links that are purely horizontal:

The bug (reported by @pixflowave) is due to the infamous browser issue that an horizontal path has height 0, and thus the gradient is optimized out. (This issue is also often hitting d3-sankey users, https://github.com/d3/d3-sankey/issues/28.)

A way to fix this is to always add some points in any path, to guarantee that the bounding-box’s area is not 0.

For example, one could use: curve: bbCurve(d3.curveBumpX)

where:

function bbCurve (curve) {
  return (context) => {
    const c = curve(context);
    const { point, lineEnd } = c;
    let x0, y0;
    return Object.assign(c, {
      point(x, y) {
        point.call(this, (x0 = x), (y0 = y));
      },
      lineEnd() {
        this._context.moveTo(x0 - 0.1, y0);
        this._context.moveTo(x0, y0 + 0.1);
        lineEnd.call(this);
      }
    });
  };
}

Not sure if this should be done in Plot, as an option of d3 curves, or somewhere else?

Start at the Plot.tree implementation and its gradient-stroke path handling, then reproduce the failure with a purely horizontal link. Compare the suggested curve wrapper with the existing d3 curve integration; done means horizontal tree links render their gradients reliably without affecting other link shapes.