如何在d3中同时动画饼图的半径和弧长？

// 创建SVG容器
var svg = d3.select("body")
  .append("svg")
  .attr("width", 400)
  .attr("height", 400);

// 定义饼图数据
var data = [30, 40, 50];

// 创建饼图生成器
var pie = d3.pie()
  .value(function(d) { return d; });

// 创建弧生成器
var arc = d3.arc()
  .innerRadius(0)
  .outerRadius(100);

// 生成饼图路径数据
var arcs = svg.selectAll("path")
  .data(pie(data))
  .enter()
  .append("path")
  .attr("d", arc)
  .attr("fill", function(d, i) { return "steelblue"; });

// 创建插值器
var interpolate = d3.interpolate({ startAngle: 0, endAngle: 0, outerRadius: 0 }, { startAngle: Math.PI * 2, endAngle: Math.PI * 2, outerRadius: 100 });

// 创建过渡对象
var transition = d3.transition()
  .duration(2000);

// 设置过渡效果
arcs.transition(transition)
  .attrTween("d", function(d) {
    var currentArc = this.__current__; // 获取当前的弧路径
    if (!currentArc) currentArc = { startAngle: 0, endAngle: 0, outerRadius: 0 }; // 如果没有当前的弧路径，则设置为初始值
    var interpolateStartAngle = d3.interpolate(currentArc.startAngle, d.startAngle); // 计算起始角度的插值函数
    var interpolateEndAngle = d3.interpolate(currentArc.endAngle, d.endAngle); // 计算结束角度的插值函数
    var interpolateOuterRadius = d3.interpolate(currentArc.outerRadius, 100); // 计算半径的插值函数
    return function(t) {
      d.startAngle = interpolateStartAngle(t); // 计算当前的起始角度
      d.endAngle = interpolateEndAngle(t); // 计算当前的结束角度
      d.outerRadius = interpolateOuterRadius(t); // 计算当前的半径
      return arc(d); // 返回对应的路径数据
    };
  });