Refresh Pie Slice Size In Raphael Pie Chart

Question

I am working on a pie chart that shows the results over time. Thus, he must revitalize between states to show how different slices change. I figured out how to change all the fragments in the mass (using this example as a starting point), but I would like to be able to select and control a specific slice (or the sector that Raphael calls it) at a time. Has anyone figured out how to do this? I found that if var pie is my pie chart, then I can get a specific fragment using:

var pie = rgpiechart(200, 200, 150, dataArray); slice = pie.series[0]; 

But when I try to change the slice, say, the animation (in particular, to resize it), it will not work (the segment does not fit?):

 slice.animate({segment: [200, 200, 0, 100]}, 800); 

Any understanding of manipulating individual slices would be very helpful.

Answer 1

I was very embarrassed to realize that the segment attribute is a custom attribute created and used in the example I found to update the path to the piece of cake and therefore its size. It looks like this:

  var r = Raphael("holder"); r.customAttributes.segment = function (x, y, r, a1, a2) { var flag = (a2 - a1) > 180, clr = (a2 - a1) / 360; a1 = (a1 % 360) * Math.PI / 180; a2 = (a2 % 360) * Math.PI / 180; return { path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]], fill: "hsb(" + clr + ", .75, .8)" }; }; 

Here's what it might look like in context: I have three values ​​[10, 20, 15] that are 45. Assuming a circle with a width and height of 250, I can fill the circle with slices using a custom segment attribute like this (if I have there is a div on my page with owner id):

 var r = Raphael("holder"); r.customAttributes.segment = function (x, y, r, a1, a2) { var flag = (a2 - a1) > 180, clr = (a2 - a1) / 360; a1 = (a1 % 360) * Math.PI / 180; a2 = (a2 % 360) * Math.PI / 180; return { path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]], fill: "hsb(" + clr + ", .75, .8)" }; }; points = [10, 20, 15]; total = 45; start = 0; paths = []; for(i=0; i<=2; i++) { size = 360 / total * points[i]; var slice = r.path(); slice.attr({segment: [250, 250, 200, start, start + size], stroke: "#000", title: "Slice "+i}); paths.push(slice); start += size; } 

Then I can animate slices in an array of paths whenever I want, by animating a segment attribute:

 newPoints = [5, 20, 20]; start = 0; for(i=0; i<=2; i++) { size = 360 / total * newPoints[i]; paths[i].animate({segment: [250, 250, 200, start, start + size]}, 800); paths[i].angle = start - size / 2; start += size; } 

I understand some of them, some of them I do not do. But the above code will work (I checked).