切片和反弹效果在饼图中无法正常工作

Question

根据下面的代码，当bounce effect的{​​{1}}不能正常工作时，我期待pie chart loads first time expand the arc slice选定的弧与相邻的弧重叠，而它应该像on mouseenter一样工作，如下例所示，它应该只展开并移动其他弧。可以指出我在哪里做错了。

         饼形图               

red arc

以下是我迄今为止尝试过的bin。

Answer 1

弧由于它们附加在SVG中的顺序而重叠。如您所知，SVG订单定义了哪个元素超过其兄弟姐妹。因此，当您展开悬停的弧（使用新的startAngle和endAngle）时，弧会在下以的方式扩展，它以SVG顺序位于其顶部。

一种解决方案是对mouseenter函数内的元素进行排序，使得悬停元素是SVG顺序中的第一个元素。这是功能：

  svg.selectAll("path").sort(function (a, b) { 
      if (a != d) return -1;               
      else return 1;                             
  });

您悬停的元素是d，a是第一个。{1}}。使用此功能，当您将鼠标悬停在它们上时，所有paths都会被排序。

这是Bin：http://jsbin.com/hotifepiko/1/edit?html,output

PS：这个其他Bin解决了文本消失的问题（因为sort功能）。我刚刚为文本创建了新的组：http://jsbin.com/mifejasiyo/1/edit?html,output