Dynamically updating in d3 works for circles but not external SVGs

Dynamically updating in d3 works for circles but not external SVGs

Suppose I want to dynamically update the position and number of circles on
a page using d3. I can do this, using the .data(), .enter(), .exit()
pattern. Here is a working example. http://jsfiddle.net/csaid/MFBye/6/
function updatePositions(data) {
var circles = svg.selectAll("circle").data(data);
circles.enter().append("circle");
circles.exit().remove();
circles.attr("r", 6)
.attr("cx", 50)
.attr("cy", function (d) {
return 20 * d
});
}
However, when I try to do the same thing with external SVGs instead of
circles, many of the new data points after the first update do not appear
on the page. Example: http://jsfiddle.net/csaid/bmdQz/8/
function updatePositions(data) {
var gs = svg.selectAll("g")
.data(data);
gs.enter().append("g");
gs.exit().remove();
gs.attr("transform", function (d, i) {
return "translate(50," + d * 20 + ")";
})
.each(function (d, i) {
var car = this.appendChild(importedNode.cloneNode(true));
d3.select(car).select("path")
});
}
I suspect this has something to do with the .each() used to append the
external SVG objects, but I am at a loss for how to get around this. Also,
the "cx" and "cy" attributes are specific for circles, and so I can't
think how they could be used for external SVGs.
Thanks in advance!