Sankey link stroke gradient reference being corrupted by transition function

[malcolmsheppardsig]

NOTE: Also posted as d3-Sankey issue #61.

I am setting the stroke of the Sankey links to a function that typically returns a color spec (i.e. #678 or rgb(255,64.0)). I recently added the capability for the stroke setting function to also return a gradient definition reference, such as "url(#grd_lb03)". I'm using the "Bostock Update Pattern" to manage the nodes and links. I am using the ".transition()" function when updating the links. However, I've discovered that is during the update cycle, when the stroke function is now returning a gradient definition reference, the transition function is inappropriately munching the URL so that I sometimes lose leading zeros in the URL string, such as "url(#grd_lb3)" in my earlier example. If I move the transition function call after stroke setting clause, the URL is not affected. This appears to be a bug in the transition function, trying to deal with the URL as if it is a color spec.

Snippet:

 // UPDATE old elements present in new data
this._Links.select("path")
    .attr("stroke", linkStrokeFunction)

    // This needs to be after the stroke setting due to an apprent bug in D3 that tries to transform a gradient defintiion URL reference during transition
    .transition().duration(this.STANDARD_TRANSITION_DURATION).delay(this.STANDARD_TRANSITION_DELAY)

    .attr("d", this._D3SankeyLinkHorizontal())
    .attr("stroke-width", (d: any) => Math.max(2, d.width))
    ;

[mbostock]

Please use Stack Overflow tag d3.js to ask for help. Stack Overflow provides a better collaborative forum: thousands of D3-related questions have been asked there, and some answers may be relevant to you.

When asking for help, please include a link to demonstrate the issue, preferably as an Observable notebook. It is often impossible to debug from code snippets alone. Isolate the issue and reduce your code as much as possible before asking for help. The less code you post, the easier it is for someone to debug, and the more likely you are to get a helpful response.

If you have a question about D3’s behavior and want to discuss it with other users, also consider the d3-js Google Group or joining the d3-js Slack.

Thank you! 🤗