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

我正在制作一个饼图，显示一段时间内的结果。因此，它需要在状态之间设置动画，以显示不同的切片是如何变化的。我已经想出了如何整体更改所有切片（使用作为起点），但我希望能够一次选择和管理特定切片（或Raphael称之为扇区）。有人知道怎么做吗？我发现，如果var pie是我的饼图，那么我可以通过以下方式获得特定的切片：

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

但是，当我尝试使用动画（特别是更改其大小）更改切片时，失败了（分段不是正确的方式？）：

---

任何对操作单个切片的深入了解都会非常有用。

我非常尴尬地意识到，segment属性是一个自定义属性，我在一个示例中创建并使用它来更新饼图切片的路径，从而更新其大小。看起来是这样的：

  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为holder的div）用切片填充圆：

var r=Raphael（“持有人”）； r、 customAttributes.segment=函数（x、y、r、a1、a2）{ var标志=（a2-a1）>180， clr=（a2-a1）/360； a1=（a1%360）*Math.PI/180； a2=（a2%360）*Math.PI/180； 返回{ 路径：[“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”]， 填充：“hsb（“+clr+”，.75，.8）” }; }; 分数=[10,20,15]； 总数=45； 开始=0； 路径=[]； 对于（i=0；i

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

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