SVG Pie chart animation

Question

I have a pie chart svg image, which I get it from server. And my job is to apply animation to this pie chart on client side using snap svg.

Now, the problem is I am new to SVG and I don't know where to start, but I have succeed in animating other chart types.

Can anybody help me with some referral links to solve this problem. I got this link which implements this. But they have not explained how they have achieved this.

Any other kind of animation which can be achieved by snap svg for pie chart can also help me.

---

edit I have added fiddle of pie chart that I want to animate. I have tried this code:

Snap("svg").select("#pie2d").
            animate({ transform: 'r360,150,150' }, 1000, mina.linear );

which does not animate each section of pie chart but complete chart as a whole instead.

This line does not get executed in fiddle as it needs Snap.js

Any help is appreciated.

Thanks in advance.

Answer 1

Snap animations are generally straightforward. Here is a relatively simple example that will introduce some of the elements you may need..load in a file, and animate it once loaded with hover (you must wait until load finish with file imports).

I couldn't put it on a jsfiddle as it needs a remote file, but have it on a test page here with the code below. Also the Snap website getting started page shows loading in svg and animating.

var s = Snap(600,600); 
var g = s.group();
var tux = Snap.load("Dreaming_tux.svg", function ( loadedFragment ) { 
                    g.append( loadedFragment ); 
                    g.hover( hoverover, hoverout );
                } );  

var hoverover = function() { g.animate({ transform: 's2r45,150,150' }, 1000, mina.bounce ) };
var hoverout = function() { g.animate({ transform: 's1r0,150,150' }, 1000, mina.bounce ) };

For transforms, they use the Raphael format (same author), which is loosely the following...

t=relative transform, T=absolute transform, s=relative scale, S=absolute Scale r=relative rotate, R=relative rotate r elative means it takes into account previous transforms to accumulate here it doesn't make much difference, until we combine later

For the specific pie chart, it depends if you already have that in the svg you are pulling from the server, so you may not need to know too much about pie chart creation. If you do, there are some other libraries which support pie charts already (by Raphael, d3.js etc)

I assume you will need to attach a hover element to each segment of the pie chart (you can use something like g.select("segment1")), and scale it up/out, like above.