Monday, September 14, 2015

D3 js join / update not working as expected

If there are rendering issues with the update pattern i.e regarding the location of the new items in the data array then try out this pattern.

var text = svg.selectAll("text").data([]);

text.exit().remove();

text = text.data(data);

text.enter().append("text")
.attr("class", "enter")
.attr("x", function(d, i) { return i * 32; })
.attr("dy", ".35em");.

text.text(function(d) { return d; });

Here i have initially passed a empty array to remove all the point and then add the new one, i have faced some issues while we pass very little data may be array of length One to update the text. Where in my case i had an nested array with data that was being passed.
eg: [ [N,1,20], [N,1,25]]  Here 20,25 denotes the data part. The update array was also of same length with data slightly different as [ [N,1,29], [N,1,22]]

No comments:

Post a Comment