There are two things here. First, you are binding the data twice:
arcs.data(pie(dataset))
// ...
arcs.data(pie(dataset)).exit()...
This second time will pick up the arcs you've just added before, which is not what you want. Do the data binding once and save the result in a variable:
var sel = arcs.data(pie(dataset));
sel.enter()...
sel.exit()...
Which brings me to the second thing. You weren't saving the updated selections anywhere, resulting in problems later on. Calling .data()
on a selection does modify the underlying data, but does not update the selection. That is, arcs
refers to the same elements both before and after calling .data()
, regardless of what you do with .enter()
etc.
I've fixed both of these issues here. For the latter, I'm explicitly reselecting the elements that the data should be bound to (e.g. arc_grp.selectAll("path")
). There are other ways of doing this, but this one makes explicit what you're working with.