javascript - 如何删除可缩放旭日形上的虚假线？

Question

如果你看一下可缩放的旭日形：

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

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

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 域的最终值，所以不能'直到第一个转换完成后才运行，但是通过直接使用数据值，两个转换可以同时进行，这只是您喜欢哪种外观的问题。）