block by micahstubbs b52cc51f3587ed0d314696189a41638d

origin destination map experiment - confluent nodes

Full Screen

a solution 🎉

solution
[tweet]

specifically, this stackoverflow answer has the workaround to solve this apparent bug in Chromium‘s implementation of the SVG 1.1 standard

in d3.sankey.js, we want to alter the return value of the path generator to ensure that we never return perfectly straight paths. inserting this this new moveto command "M" + -10 + "," + -10 on the first line does just that:

return "M" + -10 + "," + -10
     + "M" + x0  + "," + y0
     + "C" + x2  + "," + y0
     + " " + x3  + "," + y1
     + " " + x1  + "," + y1;

an iteration on by Patient Flow Sankey Particles from @micahstubbs

see also the earlier version with 13 layout iterations that happens to avoid any perfectly straight paths.

and also this earlier bug reproduction example with 14 Sankey layout iterations that does produce a couple of those problematic-for-Chromium perfectly straight SVG paths

inspired by the blog post Data-based and unique gradients for visualizations with d3.js and associated example Data based gradients - Simple - Solar system from @nadiehbremer

forked from micahstubbs‘s block: Sankey Gradients - Missing Gradient Solution

forked from micahstubbs‘s block: origin destination map experiment

index.html

d3.sankey.js

data.json