悬停RaphaelJs饼图动画 [英] RaphaelJs Pie Chart Animation on Hover

问题描述

我正在定制下面链接的网站拉斐尔给出的饼图
http://raphaeljs.com/pie.html

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

我打了以下code线的变换属性，但不能让它为我想要的。

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);
});

改变3行的CX和CY实际固定中相同的方式每片动画，即，悬停每片将不断地改变的位置。

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.

请人帮我解决这个问题。

anyone please help me out to solve this problem

推荐答案

如果我正确地理解你的问题，你想要的切片完全从饼图断开，当有人悬停。

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

要做到这一点，你要翻译的段，它可以让你在给定方向移动一个SVG对象，对X，Y坐标。我不是SVG亲，所以我建议考虑看看这个自己的全部功能;不管了，做这些类型的操作与拉斐尔，您可以使用 元素。变换 ，或者可以提供在动画通话变换值。

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.

这些二是正在发生的事情在你提供的例子，除了规模改造正在被使用，指示由领导取值在变换：。S1.1 1.1 A的规模将物体更大

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.

在这里，你要使用的移动对象，但不会使它更大翻译 - 它使用了 T

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

下面是code的略微编辑块，将做到这一点：

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);
        });

在这个例子中，距离指的是片应该多远搬走（可以随意调整此）， xShiftTo 和 yShiftTo 计算X，该对象应该转向相对y值，他们目前是。请注意，这是一个有点复杂 - 你需要在给定的角度从饼图中心仅弄清楚X，Y值。文本的定位也做这样的事情，所以我只是采取了必要的数学从那里。另外，我刚离开反弹动画，但你可以改变，要线性或任何你想要的。希望有所帮助。

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.

这篇关于悬停RaphaelJs饼图动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！