[sankey] color links with gradients #3261 from plotly.js

[gregorywaynepower]

Hey Y'all,

We have unsolved issue #3261 in the plotly.js repo that needs some fixing. Current advice for implementation is:

From @alexcjohnson :

@migupry note that plotly.js uses a fork of d3-sankey: https://github.com/plotly/d3-sankey - mainly this was done to switch how we draw links: d3-sankey draws a path from source to target, using stroke-width and stroke-color to set its size and color. Our fork draws the full link outline and uses fill-color. This allows us to avoid overlaps when several links travel in parallel, and lets us outline the links. But as a result we would need to re-implement gradient link colors. There would be two steps to getting this into plotly.js: (1) add the capability to https://github.com/plotly/d3-sankey - probably following the general pattern of how this was done in the original, but applying it to fill instead of stroke; if the only gradient allowed by the original is 'source-target', that seems like the main thing people are interested in but if we can do something more general and allow each link to specify its own gradient that would be even better. (2) expose this capability inside plotly.js

[alexcjohnson]

Thanks @gregorywaynepower - if you or anyone else wants to take a crack at this go right ahead! I'm not sure we'll be able to help that much, since it's been quite a long time since any of us touched this code, but if you hit any snags we'll try to answer questions as best we can.

Given that the whole purpose is plotly.js and there are hardly any tests in this repo, I'd suggest working on the two in tandem: clone both repos locally and npm link this one to plotly.js, then when you're ready to make a PR into plotly.js, point the package.json dependency to the specific commit you want in d3-sankey.

[gregorywaynepower]

@alexcjohnson I appreciate the advice! I'll definitely do some work on my end and see what I can cook up. That gradient feature/option would be a game-changer for folks like myself.