javascript - 如何消除可缩放旭日图上的杂散线？

Question

如果你看zoomable sunburst :

...如果您更改 <svg> 的背景颜色元素，然后当您放大时，您会注意到笔划一直延伸到 SVG 元素的顶部，超出旭日的弧线。 Here是一个示例 - 请注意从圆圈顶部向上延伸的额外线条。

您在演示中看不到这一点，因为背景是白色的，笔划也是白色的。但我的笔画和背景颜色之间的对比度要强得多，所以这条虚假的线很刺眼。

Answer 1

发生的情况是，当您放大一个片段时，不属于该片段子片段的片段会向下折叠到零 Angular 。但它们仍然是画出来的，而且仍然是白色的。它很容易被忽视，因为 (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)
      });
}

fiddle 显示原始问题:http://fiddle.jshell.net/ekL8z/

使用上面的代码更正了 fiddle :http://fiddle.jshell.net/ekL8z/1/

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