plot
plot copied to clipboard
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?