d3.js - Smooth transition on arc draw for pie chart - d3.js

Question

I have put together a pie chart in d3 and am using a transition and delay for when each of the arcs are getting drawn.
Code Snippet:
var path = g.selectAll("path")
.data(pie(dataset.apples))
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.transition()
.delay(function(d, i) {
return i * 100;
})
.duration(500)
.attr("d", arc);
Working fiddle
I'd like to achieve a smoother transition so that each arc appears to grow in sequence from one to the other as they are drawn until, rather than just appear immediately like they do now.
Can someone give me some help?
Thanks

Answer 1

I can suggest 2 ways to do this animation:
Animation 1 done with the help of delay here one slice grows and then next slice will grow.
//the tween will do the animation as end angle increase over time
var path = g.selectAll("path")
.data(pie(dataset.apples))
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.transition()
.delay(function(d, i) {
return i * 800;
})
.attrTween('d', function(d) {
var i = d3.interpolate(d.startAngle+0.1, d.endAngle);
return function(t) {
d.endAngle = i(t);
return arc(d);
}
});
working example here
Animation 2 Each slice grows #same time done with duration
var path = g.selectAll("path")
.data(pie(dataset.apples))
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.transition()
.duration(function(d, i) {
return i * 800;
})
.attrTween('d', function(d) {
var i = d3.interpolate(d.startAngle+0.1, d.endAngle);
return function(t) {
d.endAngle = i(t);
return arc(d);
}
});
Working code here
Hope this helps!