CODEWITHSUNDEEP
javascriptsvgd3.jstransitionpie-chart
emepyc
emepyc

Reputation: 969

Transition on pie-chart resize in d3.js

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?

Upvotes: 2

Views: 5828

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

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

Upvotes: 9

Related Questions