samedi 25 juin 2016

Duplicate values and overlapping selectAll's in D3

I'm a d3.js noob, I just started learning for a quick exercise. I'm appending different texts with different patterns so I'm using different functions using the selectAll("text") statement.

But there was an issue with this. If I append 3 labels and then tried to append 4 more, only the 4th would've been applied. That's because the selectAll would go through the ones that have already been inserted. Googling this issue I learned the solution was to use .data(data, function(d){ return d; }) and the new elements would've been added properly. So far all my issues have been solved.

The problem arrises now that I need to append the values "40" and "60" twice in two different contexts but the duplicate values are ignored. Again I googled for a solution and came up to this post - Complex data object with duplicate 'values' = missing chart bars It says the solution is to remove the same line I mentioned before or use a different value, but in my case I'm dealing with a plain array of numbers. And removing the line that includes previous elements doesn't help because the next elements won't be appended.

EDIT: There is a github issue discussing this Clarify behavior for selection.data in re. to duplicate keys. #997 - I didn't find it clarifying in any way. Perhaps you'll make better sense of it than I did...

EDIT 2: here's a jsFiddle explaining the issue

Aucun commentaire:

Enregistrer un commentaire