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 域的最终值，因此在第一个转换完成之前无法运行，但是通过直接使用数据值，两个转换可以同时进行，这只是一个问题您更喜欢哪种外观。)