Animating D3 donut chart on load

Question

I have a donut chart with five different arcs inside of it. The data will not be updated but I want to have a transition of the whole graph being drawn as a circle when the page

Answer 1

You can do this with an attribute tween:

.attrTween('d', function(d) {
   var i = d3.interpolate(d.startAngle+0.1, d.endAngle);
   return function(t) {
       d.endAngle = i(t);
     return arc(d);
   }
});

This animates the segment from start to end angle. To do this across the entire circle, you can use delayed transitions:

.transition().delay(function(d, i) { return i * 500; }).duration(500)

Complete example here. You can adjust start segment, duration, etc to your liking.