What's happening is that when you zoom in on one segment, the segments that aren't children of it get folded down to zero angle. But they are still drawn, and they are still stroked in white. It's easy to overlook because (a) the white stroke matches the white background, and (b) any adjacent arcs are drawn overtop. But if the background isn't white and the displayed arcs don't cover up the full depth, you're left with this spike from the folded-up arcs.
The solution is therefore to actually hide any arcs that aren't part of this zoom level after animating their transition to zero width:
function click(d) {
path.attr("opacity", 1) //turn on visibility so you can see animation
.transition()
.duration(750)
.attrTween("d", arcTween(d))
//this creates a tween for *all* elements based on the clicked element's data
//when the transition comletes, the domain of the x scale will be the
//extent of this element and all its children
.transition().duration(0)
//create a zero-length transition that will start
//after the shape transition completes
.style("opacity", function(d2,i2) {
return ((d2.x >= d.x + d.dx) || (d2.x + d2.dx <= d.x) )?
//is this data outside of the domain?
0 : //yes - zero opacity (transparent)
1; //no - full opacity (visible)
});
}
Fiddle showing the original problem: http://fiddle.jshell.net/ekL8z/
Fiddle corrected with the code above: http://fiddle.jshell.net/ekL8z/1/
Alternate code with the opacity transitioning instead of changing at the beginning and end:
http://fiddle.jshell.net/ekL8z/2/
(My original code for setting opacity was based on the final value of the x domain, and so couldn't run until the first transition was complete, but by using the data values directly the two transitions can be simultaneous, it is just a matter of which appearance you prefer.)