plot icon indicating copy to clipboard operation
plot copied to clipboard

tree and gradient

Open Fil opened this issue 1 year ago • 0 comments

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

Capture d’écran 2024-01-30 à 13 35 38

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);
      }
    });
  };
}

Capture d’écran 2024-01-30 à 13 35 52

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

Fil avatar Jan 30 '24 13:01 Fil