d3过渡transition.attrTween

Question

我正在写一个弧来显示数据页面。点击此页面上的每个弧都需要动画。 我们的要求是文本应该在每个圆弧上显示圆弧，但是在点击圆弧进行动画处理后，我不确定圆弧的内半径和外半径。我对d3一个过渡效果不是很了解，可能我说不是特别清楚，你看代码吧。

      // Interpolate the scales!
function arcTween(d) {
      var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
      yd = d3.interpolate(y.domain(), [d.y, 1]),
      yr = d3.interpolate(y.range(), [d.y ? change_y : 0, radius]);

    return function(d, i) {
        return i
        ? function(t) { return arc(d); }
        : function(t) { 
            x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
  };
}



     function click(d) {
      text.transition().attr("opacity", 0);  
      text.style("visibility", function(e) {
          return isParentOf(d, e) ? null : d3.select(this).style("visibility");
        });
      path.transition()
          .duration(duration)
          .attrTween("d", arcTween(d))
          .each("end", function(e, i) {
                  if (e.x >= d.x && e.x < (d.x + d.dx)) {
                  var arcText = d3.select(this.parentNode).select("text");
                  var defs = svg.append("svg:defs");
                  defs.append("svg:path").attr("id", "arc_path"+i)
                      .attr("d", arcTween(e));

                 arcText.select("textPath").attr("xlink:xlink:href", "#arc_path"+i)
                 .text(function(){ 
                    // if(!e.showName){
                    //   return "";
                    // }else{
                         return e.name;
                    // }
                    });
                  arcText.transition().duration(duration)
                     .attr("opacity", 1);
              }
          });
      }
});