D3.js：使甜甜圈图表动态化

Question

我对D3中的dataviz很新。我一直在试验面团坚果图。我确实理解它是如何工作的，但是当它有扩展弧时我无法用动态数据更新它。

我认为这是因为arcTween的问题。但我不确定这是如何运作的。

代码：

var margin = {top :30, right: 30, bottom: 40, left: 50}
var width = 960,
    height = 500;

var outerRadius = pie_height / 2 - 20,
    innerRadius = outerRadius / 2,
    cornerRadius = 10;

var pie = d3.layout.pie()
    .sort(null)
    .padAngle(.02)
    .value(function(d) { return d.value; });

var arc = d3.svg.arc()
    .padRadius(outerRadius)
    .innerRadius(innerRadius);

d3.tsv('data.tsv', function(error, data) {

var svg= d3.select("#pie").append("svg")
    .attr("width", width)
    .attr("height", pie_height)
    .append("g")
     .attr("transform", "translate(" + width / 2 + "," + pie_height / 2 + ")");

svg.selectAll("path")
    .data(pie(data))
  .enter().append("g")
    .attr('class', 'slice')

     var slice = d3.selectAll('g.slice')
      .append('path')
      .each(function(d) {
        d.outerRadius = outerRadius - 20;
      })
      .attr("d", arc)
      .attr('fill', "#000")
      .on("mouseover", arcTween(outerRadius, 0))
      .on("mouseout", arcTween(outerRadius - 20, 150));

    var text = d3.selectAll('g.slice')
    .append('text')
    .data(pie(data))
    .text(function(d, i) {
      return d.data.domain;
    })
    .attr('fill', 'white')
    .attr('class', 'pieinfo')
    .attr('text-anchor', 'middle')
    .attr('transform', function(d, i) {
      d.innerRadius = innerRadius;
      d.outerRadius = outerRadius;
      return 'translate(' + arc.centroid(d) + ')'
    });

  d3.selectAll("input")
      .on("change", change);


  function change() {
    var value = this.value;
    clearTimeout(timeout);
    pie.value(function(d) { return d[value]; }); // change the value function
    path = path.data(pie); // compute the new angles
    path.transition().duration(750).attrTween2("d", arcTween); // redraw the arcs
  }

function arcTween2(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}    

function arcTween(outerRadius, delay) {
  return function() {
    d3.select(this).transition().delay(delay).attrTween("d", function(d) {
      var i = d3.interpolate(d.outerRadius, outerRadius);
      return function(t) { d.outerRadius = i(t); return arc(d); };
    });
  };
}

有人可以解释错误以及如何使其发挥作用吗？

谢谢！