如何在可缩放的森伯斯特上移除虚假线？

Question

如果你看zoomable sunburst：

...如果你改变了<svg>元素的背景颜色，那么当你放大时，你会发现笔划一直延续到SVG元素的顶部，超出弧线森伯斯特。 Here就是一个例子 - 请注意从圆圈顶部向上的额外线条。

您在演示中看不到这一点，因为背景为白色且笔划为白色。但是我在笔画和背景颜色之间有了更强烈的对比，所以这个虚假的线条罐子。

Answer 1

正在发生的事情是当您放大一个片段时，不是它的子片段会折叠到零角度。但他们仍然被吸引，他们仍然被白色抚摸。它很容易被忽略，因为（a）白色笔划与白色背景相匹配，（b）任何相邻的弧线都在上方绘制。但是如果背景不是白色并且显示的弧线没有覆盖整个深度，那么你就会从折叠的弧线中留下这个尖峰。

因此，解决方案是在将它们转换为零宽度后实际隐藏任何不属于此缩放级别的弧：

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)
      });
}

小提琴显示原始问题：http://fiddle.jshell.net/ekL8z/

小提琴更正了上面的代码：http://fiddle.jshell.net/ekL8z/1/

使用不透明度转换而不是在开头和结尾处更改的备用代码：
http://fiddle.jshell.net/ekL8z/2/
（我设置不透明度的原始代码是基于x域的最终值，因此在第一次转换完成之前无法运行，但通过直接使用数据值，两个转换可以同时进行，这只是一个问题您喜欢哪种外观。）