CODEWITHSUNDEEP
javascriptd3.jscolors
OverflowingTheGlass
OverflowingTheGlass

Reputation: 2434

How to Maintain d3 Color Scale with Link Severing and Re-joining

I have a d3 block: https://bl.ocks.org/anonymous/70ad367d980d33160d0681881ab10aae

The functionality I am concerned with is the slider which severs links (based on this example: https://bl.ocks.org/jrladd/c76799aa63efd7176bd9006f403e854d). This functionality works, except the color scale I have implemented is not carrying over once the link threshold is changed. The color scale is correct the first time the graph renders, but it changes/is incorrect as soon as the threshold changes. When the threshold is returned to the lowest value, the color scale remains incorrect.

I tried using the same variable for the color scale for the initial rendering and new rendering, and this returned the same, incorrect result.

How do I maintain the accuracy of the color scale while severing and rejoining links?

Upvotes: 1

Views: 30

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

If you console.log(d.value) inside the event handler, you're gonna see that the value of the datum (d.value) in the enter selection (linkEnter) is always 179 (which is the last value). And that's expected, since the data-binding function by default binds the data by index.

That being said, the solution here is just using a key function:

link = link.data(newData, function(d){ return d.value});
//this is the key function -----^

Since the values in d.value are not unique, a better solution would be creating a unique property for the links.

Besides that, don't forget to update the colours in the "update" selection.

Here is the updated bl.ocks: https://bl.ocks.org/anonymous/59f0783654d89e5a45c55ecf150032bc

Upvotes: 1

Related Questions