Question

i am customizing the pie chart given on the raphael site below link
http://raphaeljs.com/pie.html

this chart shows animation when hover a slice, this animation simply expand the slice a little

what i want is to separate the slice from the chart

i played with the transform property of following lines of code but could not make it as i want.

p.mouseover(function () {
var xis= p.getBBox(true);
p.stop().animate({transform: "s1.1 1.1 "+ cx + " " + cy }, ms, "linear");
txt.stop().animate({opacity: 1}, ms, "linear");
}).mouseout(function () {
p.stop().animate({transform: ""}, ms, "linear");
txt.stop().animate({opacity: 0}, ms);
});

Changing the line 3’s cx and cy actually fixed the animation for every slice in the same manner, that is, on hover every slice will change the position constantly.

http://imageshack.us/photo/my-images/690/sliced1.png

anyone please help me out to solve this problem

Answer 1

If I understand your question correctly, you want the slice to completely disconnect from the pie chart when somebody hovers over it.

To do this, you want to translate the segment, which allows you to move an SVG object in a given direction, toward x, y co-ordinates. I’m no SVG pro, so I’d suggest taking a look into the full functionality of this yourself; regardless, to do these types of operations with Raphael, you can use the Element.transform, or can provide transform values in an animate call.

The second of these is what is happening in the example you provided, except a scale transformation is being used, as indicated by the leading s in transform: "s1.1 1.1.. A scale will make the object bigger.

Here, you want to use a translation which moves the object but doesn’t make it bigger – it uses a t.

Here is a slightly edited block of code that will do this:

        p.mouseover(function () {
            var distance = 20;
            var xShiftTo = distance*Math.cos(-popangle * rad);
            var yShiftTo = distance*Math.sin(-popangle * rad);
            p.stop().animate({transform: "t" + xShiftTo + " " + yShiftTo}, ms, "bounce");
            txt.stop().animate({opacity: 1}, ms, "bounce");
        }).mouseout(function () {
            p.stop().animate({transform: ""}, ms, "bounce");
            txt.stop().animate({opacity: 0}, ms);
        });

In the example, distance refers to how far the slice should move away (so feel free to adjust this), xShiftTo and yShiftTo calculate the x, y values that the object should shift by, relative to where they currently are. Note that this is a little complicated – you need to figure out the x, y values at a given angle away from the pie centre. The positioning of the text also does something like this, so I just took the required maths from there. Also, I just left the bounce animation, but you can change that to linear or whatever you want. Hope that helps.