Kaiido gave an excellent and complete answer for why the SVG-path with thick stroke-width are displayed with artifacts and how to avoid this. I'll try to provide a bit more info that is specific to D3.js Sankey diagrams, as I was recently facing the same problem as Piotr Migdal.
Original Sankey diagram code
(from Sankey.js in this Sankey example, which is similar to the example Piotr Migdal mentioned)
// regular forward node
var x0 = d.source.x + d.source.dx,
x1 = d.target.x,
xi = d3.interpolateNumber(x0, x1),
x2 = xi(curvature),
x3 = xi(1 - curvature),
y0 = d.source.y + d.sy + d.dy / 2,
y1 = d.target.y + d.ty + d.dy / 2;
return "M" + x0 + "," + y0
+ "C" + x2 + "," + y0
+ " " + x3 + "," + y1
+ " " + x1 + "," + y1;
Modified code
// regular forward node
var x0 = d.source.x + d.source.dx,
x1 = d.target.x,
xi = d3.interpolateNumber(x0, x1),
x2 = xi(curvature),
x3 = xi(1 - curvature),
y0 = d.source.y + d.sy,
y1 = d.target.y + d.ty;
return "M" + x0 + "," + y0
+ "C" + x2 + "," + y0
+ " " + x3 + "," + y1
+ " " + x1 + "," + y1
// move down for the wanted width
+ "l" + 0 + "," + d.dy
// draw another path below mirroring the top
+ "C" + x3 + "," + (y1 + d.dy)
+ " " + x2 + "," + (y0 + d.dy)
+ " " + x0 + "," + (y0 + d.dy);
Then you'll also need to change your css:
- stroke: none
- set fill color
and remove any D3 code that sets stroke-width of HTML elements.
fill
shapes but then their widths was visibly uneven (though maybe some tweaking would help). Withstroke
- I am thinking that maybe some mask would help. – Piotr Migdalstroke-linecap: rect
but this will add the stroke-width at start and ending points of your path. make a closed path and fill it. Be sure that your stroke-width is never more than the angle... I dont know how to clearly say that but just be sure the dashes in this fiddle never collapse : jsfiddle.net/83jr5fub/3 And that's almost all of what I can think of. I don't think the mask would help since IMMind you'd need the closed path too. – Kaiido