Create an SVG element, and then an empty selection of circle elements to which we join data in the 2 item array, X2

s = d3.select("body").append("svg").attr("width",200).attr("height",200).attr("class","svg0");
t = d3.select("svg.svg0")
circle = t.selectAll("circle").data(x2);
circle.enter().append("circle")
circle
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return d.r; });

Now we have an set of two elements bound to an array of two objects. Suppose we take this arrangement and redo the select and append operation with a different dataset, this one with four objects.

Suppose we try the reverse. This time we create four circles bound to four data items. Then we select all circles and bind to a new data set with only two items. What happens? Only the first two change.

But if we do the same with .transition thrown in the mix...