CODEWITHSUNDEEP
d3.js
mindparse
mindparse

Reputation: 7215

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

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

Upvotes: 2

Views: 5826

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

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!

Upvotes: 7

Related Questions