更新Raphael饼图中的饼图片大小

Question

我正在制作一个饼图，显示随时间变化的结果。因此它需要在状态之间进行动画显示不同切片的变化。我已经想出了如何全面改变所有切片（使用this example作为起点），但是我希望能够一次选择和管理特定的切片（或拉斐尔称之为的部分）。有没有人想出如何做到这一点？我发现，如果VAR派是我饼图的话，我可以得到一个特定片：

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

但是，当我试图用改变切片说，动画（特别是改变它的大小）， （段不是正确的方式？）：

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

任何洞察操纵单个切片将是非常有用的。

Answer 1

我非常尴尬地意识到，段属性是一个自定义属性，创建并用于我发现更新扇形饼的路径的示例，因此它的大小。它看起来像这样：

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

这里的，这可能是什么样的背景下：我有三个值[10，20，15]认为总数达到45假定为250的宽度和高度，我可以一圆填充使用这样的段自定义属性片圆（假设我有持有人的ID我的网页上一个div）：

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

然后我可以动画切片在我的路径数组每当我想，通过动画片段属性：

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

其中一些我明白，其中一些我不知道。但上面的代码将工作（我检查）。