How can I remove spurious line on zoomable sunburst?

Question

If you look at the zoomable sunburst:

...and if you change the background color of the <svg> element, then when you zoom in, you'll notice the stroke continues up to the top of the SVG element, beyond the arc(s) of the sunburst. Here is an example - note the extra line going up from the top of the circle.

You don't see this on the demos, because the background is white and the stroke is white. But I've got much stronger contrast between the stroke and background colors, so this spurious line jars.

Answer 1

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.)