使用来自previous post和attrTween的数据作为参考，下面是一个应用了大路径优先动画的代码片段
第一个

相关变更：

1. AttrTween函数

function arcTween(d) {
  var i = d3.interpolate(d.startAngle, d.endAngle);
  return function (t) {
    d.endAngle = i(t);
    return arc(d);
  }
}

1.对路径使用上述方法，沿着在过渡中使用延迟，顺便说一句，延迟用于按顺序动画化路径。

g.append("path")
 .style("fill", function(d, i) {
    return color[i];
 })
 .transition().delay(function (d, i) { return i*800}).duration(800)
 .attrTween("d", arcTween);

1.按降序对数据进行排序，以首先绘制最大的弧。

// sort data
data = data.sort(function (a, b) { return b-a; });

根据Shashank的回答，我想提出一个修改

• 不对data进行排序，因为顺序看起来很重要（d[0] == man，d[1] == woman），并且弧线是按顺序着色的

// sort data
//data = data.sort(function (a, b) { return b-a; });

• 饼图生成器也不应根据值对数据进行排序

var pie = d3.pie()
  .sortValues(null) // both null means NO sort
  .value(function(d) {
    return d
  })(data);

• 在Shashanks回答中，两个部分都使用easeCubic制作动画，每个部分（小或大）需要800 ms。要获得恒定角速度动画，我们必须根据部分的startAngle和endAngle设置延迟和持续时间。过渡必须设置为easeLinear。在演示中，我将完整动画设置为5000 ms。

var msecPerRad = 5000 / (2*Math.PI);
g.append("path")
  .style("fill", function(d, i) { return color[i]; })
  .transition()
  .ease(d3.easeLinear)
  .delay(function (d) { return d.startAngle * msecPerRad;})
  .duration(function (d) { return (d.endAngle - d.startAngle) * msecPerRad;})
  .attrTween("d", arcTween);

使用线性缓动的示例
第一个
如果你想用easeCubic来完成完整的Angular 动画，这需要更多的数学运算。主要原因是两个弧段都是独立的过渡。这应该适用于2个以上的弧段。
它只适用于单调递增缓动函数，不适用于反弹、弹性和返回（进/出）等函数。

function easeInverse(ease) {
    return function(e) {
      var min = 0, max = 1;
      while (max - min > 1e-3) {
        var mid = (max + min) * 0.5;
        emid = ease(mid);
        if (emid > e) { max = mid; }
        else { min = mid; }
      }
      return max;
    }
  }
  var inverseCubic = easeInverse(d3.easeCubic);
  var oneOver2Pi = 1.0 / (2*Math.PI);
  var total_msec = 5000;

  g.append("path")
    .style("fill", function(d, i) { return color[i]; })
    .transition()
    .ease(d3.easeLinear)
    .delay(function (d) { return total_msec * inverseCubic(d.startAngle * oneOver2Pi);})
    .duration(function (d) { return total_msec * (inverseCubic(d.endAngle * oneOver2Pi) - inverseCubic(d.startAngle * oneOver2Pi));})
    .attrTween("d", arcTween);

  function arcTween(d) {
    var i = d3.interpolate(inverseCubic(d.startAngle * oneOver2Pi), inverseCubic(d.endAngle * oneOver2Pi));
    return function (t) {
      d.endAngle = 2*Math.PI*d3.easeCubic(i(t));
      return arc(d);
    }
  }

完整圆形Angular 的“立方”缓动示例。
第一个