d3js: Elements lingering even after .exit().remove() - d3.js

Question

I'm building a ring chart on last.fm's API, using live data on music listening habits. I want users to be able to enter their username, and the number of most-popular artists they'd like to see. They can then enter another username or another number of artists, and the chart re-draws itself with that new pulled data.
However, right now, I'm seeing that when I pull data that has less data points than the previous set (e.g. I ask for the top 50 artists from user X, and then the top 3 artists from user X), the ring chart ends up being remade with gaps, like so:
And then:
Moving from smaller to larger datasets (e.g. 5 artists to 50 artists) doesn't generate this problem. Here's my transition code:
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
var sum = 0;
for (i=0 ; i<d.values.length ; i++) {
sum += d.values[i].playcount;
}
return sum;
});
var path = svg.selectAll("path")
.data(pie(dataset));
path.exit().remove();
path.enter()
.append("path")
.attr("fill", function(d, i) { return color(i); })
.style("stroke-width", "1px")
.style("stroke", "white")
.attr("d", arc);
I'm convinced it has something to do with the exit/update/enter order. When I check each element in the DOM, though, the data seems to be updating and attaching itself to the right elements. I don't understand why it's not filling up to a new full, 360-degree ring chart though. Full JSFiddle here.

Answer 1

It was a simple enough fix, in the end, arrived after some time meditating over Thinking with Joins:
Before (gives gap-toothed ring charts):
var path = svg.selectAll("path")
.data(pie(dataset));
path.exit().remove();
path.enter()
.append("path")
.style("stroke-width", "1px")
.style("stroke", "white")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc);
After (no gaps):
var path = svg.selectAll("path")
.data(pie(dataset));
path.exit().remove();
path.enter()
.append("path")
.style("stroke-width", "1px")
.style("stroke", "white");
path.attr("fill", function(d, i) { return color(i); })
.attr("d", arc);
Now the mystery: why do we need to restart path. when dealing with the d elements?

Answer 2

First time when you load the data with 10 items, D3JS bind these items' data to new 10 paths. In the next time, you load new data with 3 items, by default without using key function, first 3 items are updated because there has been 3 paths existed with its d attribute having old values; 7 previous paths are removed. You should add key function or update d attribute as following:
var path = svg.selectAll("path")
.data(pie(dataset));
path.attr("d", arc); // only need to add one line here, other lines aren't changed.
path.exit().remove();
path.enter()
.append("path")
.style("stroke-width", "1px")
.style("stroke", "white")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc);

Answer 3

Hey it's probably been a really long time but I figured out that whatever you don't separate from enter() and append() doesn't get updated. So if you for example change your stroke width or stroke color you need to move it to the second path. in order for them to get updated. Currently you only update the arc and the fill color.
I had this problem and I was tearing out my hair over it, so thanks for the help!