Tricky raphael svg animation
I created a donut chart originally from this jsfiddle using raphael.
I changed the script according to my needs and is currently visualized the this .
My goal is to animate every piece (at the same time); for example, make a blue cut up to 60%; and the red cut is reduced by up to 40%.
I was able to redraw the fragments by deleting the existing one and quickly replaying the new one with the adjusted values (e.g. 51, 49). But the problem here is that it is instantaneous.
My question is:
(a) Can I animate this without having to redraw the object (and how)? (b) If not, how can I animate this effect using the redraw logic?
source to share
Yes. Here's an example of how to do this on the Raphael demo page where you got the pie chart. Watch the Growing Pie demo .
You must separate the code where you create the path into a stand-alone function so that you can use it later to return new paths. To use animate (), you need to define a function on an object customAttributes
; it should return (at least) an object with the property path
set to the new slice path.
Since you have labels, you probably want to change the code so that the pie slices expand / contract around their center, so you don't need to move those labels as the labels are centered on their slice axis.
Update
Here's a JSFiddle with a simple example, pretty much like the Demi Growing Pie demo, except it looks more like your graph. I am exporting a method setValue()
to resize the slicers and call it on page load. See his blog post on adding customAttributes too.
In my last paragraph above, I was a little unfamiliar. There were no labels in your diagram; I confused them. Also, it would have been more difficult to focus the slices, so I didn't end up doing that. The function animate()
sets each segment to its new start and end points on the circle, and Raphael calculates 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 ]})
source to share
Can't see the whole fiddle because I'm on an iPod, but it looks like you need to have a live call inside the function that you will need to write Use a callback parameter that calls the function it is in. Code your recursively called function so that it eventually exits when all the work is done. Each function call will be executed at the end of each specified time interval that you specified ...
source to share