javascript - RaphaelJs 饼图悬停动画

Question

我正在自定义以下链接中拉斐尔网站上给出的饼图 http://raphaeljs.com/pie.html

此图表显示悬停切片时的动画，该动画只是将切片稍微展开

我想要的是将切片与图表分开

我使用了以下代码行的转换属性，但无法按照我的意愿进行操作。

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实际上以相同的方式修复了每个切片的动画，即悬停时每个切片都会不断改变位置。

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

谁能帮我解决这个问题

Answer 1

如果我正确理解您的问题，您希望当有人将鼠标悬停在切片上时，该切片与饼图完全断开连接。

为此，您需要平移该段，这样您就可以将 SVG 对象沿给定方向(即 x、y 坐标)移动。我不是 SVG 专业人士，所以我建议您自己研究一下它的完整功能；无论如何，要使用 Raphael 执行这些类型的操作，您可以使用 Element.transform ，或者可以在 animate 调用中提供变换值。

第二个是您提供的示例中发生的情况，除了使用比例转换之外，如 transform 中的前导 s 所示:“s1.1 1.1. 。比例会使对象变大。

在这里，您想要使用移动对象但不会使其变大的平移 - 它使用 t。

这是一个稍微编辑过的代码块，可以执行此操作:

        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 值。请注意，这有点复杂 - 您需要计算出距饼图中心给定 Angular x、y 值。文本的定位也做了类似的事情，所以我只是从那里获取了所需的数学知识。另外，我只保留了反弹动画，但您可以将其更改为线性或任何您想要的。希望有帮助。