Link path with gradient is not visible

[d3]

Link path with gradient is not visible

[Jrubzjeknf]

@yrokhlin's solution didn't work for me, so based on his solution I modify the calculated path.

      .attr('d', d => {
        // Prevents exact horizontal sankey links from disappearing.
        // See for reference https://github.com/d3/d3-sankey/issues/28
        const path = sankeyLinkHorizontal()(d);
        const match = path.match(/,([^C]+)C/);

        if (match.length !== 2) {
          return path;
        }

        const replacementValue = +match[1] + 0.01;
        const fixedPath = path.replace(match[1], '' + replacementValue);

        return fixedPath;
      })

This turns M16,352.50000000000005C249.66666666666666,etc.. into M16,352.51000000000005C249.66666666666666,etc...

[yrokhlin]

For any future googlers such as myself that may stumble upon this problem, I found a neat little hack that will let you get around this issue.

.attr('d', d3.sankeyLinkHorizontal())
.attr('d', (d, i, items) => {
    const path = d3.select(items[i]).attr('d');
        return path + ' l0,0.001';
    })

This takes your d attribute after you set it with d3.sankeyLinkHorizontal() and adds a small string at the end which basically just picks up the last point of the path and slightly jitters it on the y axis. This makes it so d.y1 - d.y0 === 0 will never be true and the jitter is visually imperceivable.

I think this is a better solution than creating a rect especially if you are doing any sort of highlighting.

I hope this helps someone else out who is stuck.

[mbostock]

This is an unfortunate limitation of SVG’s design; the default gradientUnits = objectBoundingBox, and when the path is horizontal, the bounding box is degenerate (height = zero) because the bounding box does not consider the stroke.

The “easiest” fix is to gradientUnits = userSpaceOnUse, but then you have to compute the coordinates of the gradient relative to the SVG container rather than using the local coordinates of the path.

Or, you could compute the outline of the path yourself by computing the offset Bézier—not trivial! Bezier.js might help with that.

Or, you could special-case horizontal lines and draw a rect instead of a line, or some such.

In the future, please use Stack Overflow tag d3.js to ask for help. Although I make an effort to assist everyone that asks, I am not always available to provide help promptly or directly. Stack Overflow provides a better collaborative forum for self-help: tens of thousands of D3-related questions have already been asked there, and some answered questions may be relevant to you.

If you have a question about D3’s behavior and want to discuss it with other users, also consider the d3-js Google Group or joining the d3-js Slack.

Thank you! 🤗

[wiesson]

Thank you very much for your detailed answer! I did a quick fix, with userSpaceOnUse, but I will maybe just draw a rect to avoid this problem at all.

"Quickfix" with wrong colors:

if(d.y1 - d.y0 === 0) {
    linearGradient.attr('gradientUnits', "userSpaceOnUse")
}

[mbostock]

That fix probably isn’t sufficient because you’ll need to specify different coordinates for the gradient when you switch to userSpaceOnUse.

[wiesson]

Yes I know - but the color is at least visible! 😅 (despite being wrong / incorrect).
// edit: I added a rect if d.y1 - d.y0 === 0 - works perfectly.

[ivanjermakov]

For me issue was that I had spaces in gradient id so it was not picking up correctly.