Raphael JS Pie：旋转切片答案

【问题标题】：Raphael JS Pie: rotate the sliceRaphael JS Pie：旋转切片
【发布时间】：2012-05-10 06:12:33
【问题描述】：

我尝试创建一种带有 4 个切片的圆形旋转木马，通过单击一个切片，它会展开到饼图的 2/3 左右，显示其内容（另一个切片同样会缩小）基本上我从 raphael “成长派” 演示开始 http://raphaeljs.com/growing-pie.html 并稍作修改以获得这种行为。

但我坚持最后一步，当单击并展开切片时，它应该旋转并放置在顶部（偏移角度为 0°）...我想我需要知道每个切片的确切角度在 animation() 函数中任意更改它，但我不知道该怎么做。

function animate(ms) {
var start = 150,
    val;
for (i = 0; i <= 3; i++) {

    val = 360 / total * data[i];

    paths[i].animate({
        segment: [200, 200, 150, start, start += val]
    }, ms || 1500, "bounce");
    paths[i].angle = start - val / 2;
}

rotateCircle();

}

http://jsfiddle.net/ExFCb/32/ 这里是我正在研究的示例

【问题讨论】：

这个例子什么都不做，只是显示一个灰屏

标签： javascript svg raphael pie-chart slice

【解决方案1】：

看看更新小提琴http://jsfiddle.net/ExFCb/72/

基本上你必须在每个循环中设置正确的rerotate 变量。

if (i === 0) {
    data = [240, 40, 40, 40];
    rerotate = 0;
}

等等……

【讨论】：