curveBumpX creates a circle in Chrome if applied to a straight line.

[ohenrik]

When using curveBumpX on a straight line it creates a circle (see screenshot). So far I have only seen this bug in Chrome, it might have been created after a chrome update, but I don't know as I'm not certain I have just missed this bug earlier.

Chrome version information:
Version 103.0.5060.134 (Official Build) (arm64)

The code:

let line = d3
      .line()
      .x((d) => {
        return d[0];
      })
      .y((d) => {
        return d[1];
      })
      .curve(d3.curveBumpX)
      .context(context);

The bug (large blue circle)

How it is supposed to look:

l

[Fil]

This is probably the same as d3/d3-sankey#111

My guess is that it's caused by https://svgwg.org/svg2-draft/single-page.html#painting-StrokeShape; in that sense, it is an issue with d3-sankey which should not use stroke-width to style the links, but rather create them as filled regions.

I have been able to create a similar (but different?) issue on Chrome, Safari and Firefox: https://observablehq.com/@fil/curvebumpx-bug-201

[ohenrik]

I'm not using d3-sankey as it did not easily do what I wanted to display.

But using filled area instead of stroke width is a really good idea! I think that would solve the problem. Thank you!

For now I solved it by simply not using curve on the first element which is the only straight line, but if I encounter this bug in the future I'll use your solution.