d3js - How to make animation to the nested arcs? - animation

Question

I have a requirement from my client to create multiple arcs. i find a solution for that. But still i don't know how to add the animation to the pies.
any one help me?
here is the code :
var dataset = {
apples: [53245, 28479, 19697, 24037, 40245],
oranges: [53245, 28479, 19697, 24037, 40245],
lemons: [53245, 28479, 19697, 24037, 40245],
pears: [53245, 28479, 19697, 24037, 40245],
pineapples: [53245, 28479, 19697, 24037, 40245],
};
var width = 460,
height = 300,
cwidth = 25;
var color = d3.scale.category20();
var pie = d3.layout.pie()
.sort(null);
var arc = d3.svg.arc();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
var path = gs.selectAll("path")
.data(function(d) { return pie(d); })
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", function(d, i, j) { return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d); });
Live Demo
But how do add the animations to each of the pies?

Answer 1

You are overwriting the arc innerRadius and outerRadius every time you do this:
.attr("d", function(d, i, j) { return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d); })
So, when you call tweenPie at the end, it's using whatever final state your arc is in. You can see this more clearly by adding a delay before the transition
.transition()
.delay(1000) // add this
.duration(3000)
.attrTween('d', tweenPie);
So, either define a different arc for each row of values or reset the arc inner/outer radius in your tweenPie call to match whichever row of data you're drawing.