I am looking for an example on how to make a transition for a pie-chart resize (arc's paths). I have been looking at this example but I still don't know how to modify it to make the transition on the resize. So far I am able to resize the pie-chart by changing the outerRadius (and innerRadius) of the arc object, but no luck with the transition. Here is the example I am working on.

arc.innerRadius(newInnerRad)
   .outerRadius(newOuterRad);

path.transition().duration(500).attrTween("d", arcTween);

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

Any ideas?

I am looking for an example on how to make a transition for a pie-chart resize (arc's paths). I have been looking at this example but I still don't know how to modify it to make the transition on the resize. So far I am able to resize the pie-chart by changing the outerRadius (and innerRadius) of the arc object, but no luck with the transition. Here is the example I am working on.

arc.innerRadius(newInnerRad)
   .outerRadius(newOuterRad);

path.transition().duration(500).attrTween("d", arcTween);

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

Any ideas?

• javascript
• svg
• d3.js
• transition
• pie-chart

1 Answer 1

It works if you create arcTween inline and add an interpolator for the radius -- see the updated fiddle.