Different Link Width at Source and Target

[chanansh]

Different Link Width at Source and Target

[Fil]

The links generated by this module are made of a central path, connecting the center of the source to the center of the target. Its movement is given by the bump-x curve, and it is painted with a wide stroke. This makes it impossible (to my knowledge) to give it a variable stroke-width.

By contrast, Anneya's method is creating an area (with a fill), where the top and bottom edges are two curves, each determined by a (possibly different) bump-x curve. Maybe you could emulate that approach?

Unfortunately, using two parallel curves like this results in "squeezed" shapes (the ribbons appear smaller in the middle due to shearing), so it can't be the default method. This might be fixed by computing path offsets with path.getTangentAtLength and so on, but it seems like a lot of work.

Refs:

• https://observablehq.com/@fil/sankey-link-paths
• https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Variable_width_stroke
• https://github.com/rveciana/svg-path-properties
• https://observablehq.com/@meetamit/offset-path

[Fil]

I've added a solution with @rveciana’s svg-path-properties

[james-mckenzie-cko]

I've just done this using the approach outlined here:

https://observablehq.com/@enjalot/weird-sankey-links

The only caveat is that I've found an issue here (#92). It may or may not affect you depending on how you use it (we were scaling values either side of a node and so needed to recalculate the link height using the adjacent link positions)

hope this helps