D3 js the join pattern some intro.

This article is for some one who is trying get the update patter work in d3 js. I tried out the link http://bl.ocks.org/mbostock/3808218 which show some basic update patter. The same code works, but unfortunately when implementing similar case the result wasn't the same, After looking in to the code i realized that certain type of manipulation on d3 might not work as expected.

My initial code was something like this.

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

text.exit().remove();

Notice in the above code i have combined the setters for attributes and the final text assigning in the same line. This code doen't seem to work for some reason. So i change back to the orignal set.

var text = svg.selectAll("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; });

text.exit().remove();

And now it works. So if you are working with some similar scenarios try grouping different set of operation if the Update patter doesn't work for you.