CODEWITHSUNDEEP
javascriptsvgraphael
sgb
sgb

Reputation: 2364

Tricky raphael svg animation

I've created a 'donut' chart originally from this jsfiddle, using raphael.

I have tweaked this script to suit my needs and currently have this being rendered.

My aim is to animate each slice (at the same time); for example make the blue slice grow to 60%; and the red slice shrink to 40%.

I have been able to redraw the slices by removing the existing one and quickly re-rendering a new one with adjusted values (e.g. 51, 49). But the problem here is that it is instant.

My question is,

(a) Can I animate this without the need to redraw the object (and how)? (b) If not, how I can animate this effect using a redraw logic?

Upvotes: 3

Views: 1079

Answers (2)

Steve
Steve

Reputation: 7098

Yes. There is an example of doing this very thing on the Raphael demos page where you got the pie chart. See the Growing Pie demo.

You should separate the code in which you generate the path into a standalone function so you can use it later to return new paths. In order to use animate(), you'll need to define a function on the customAttributes object; it should return (at least) an object with the path property set to your slice's new path.

Since you have labels, you'll probably want to modify the code such that the pie slices expand/shrink relative to their center, so that you don't have to move the labels, too, since the labels are centered on their slice's "axis."

Update

Here's a JSFiddle with a simple example, pretty much the same as Dmitri's Growing Pie demo, except more like your chart. I export a setValue() method to change slice sizes and call it when the page loads. See his blog post about adding customAttributes, too.

In my last paragraph above, I was off the mark a bit. Your chart wasn't the one with labels; I had them mixed up. Also, it would be harder to keep slices centered, so I didn't do that after all. The animate() function sets each segment to its new starting and ending points on the circle, and Raphael figures out the intermediate points. As you can see, you can pass multiple arguments in an array.

this.customAttributes.slice = function(a0, a1) { /*...*/ }
// ...
chart.push(paper.path().attr({slice:[0, Math.PI/2 ]})

Upvotes: 3

Chasbeen
Chasbeen

Reputation: 1436

Can't see all the fiddle because I'm on iPod however it sounds like you need to have an animate call inside a function that you will need to write Use the callback parameter that calls the function it sits inside. Code your recursively called function so it eventually completes when all the work is done. Each call to the function will happen at the end of every elapssed time interval you specify...

Upvotes: 0

Related Questions