更新Raphael餅圖中的餅圖切片大小

Question

我正在制作一個餅圖，該餅圖顯示一段時間內的結果。 因此，需要在狀態之間進行動畫處理以顯示不同切片的變化方式。 我已經想出了如何整體更改所有切片的方法（以本示例為起點），但是我希望能夠一次選擇和管理一個特定的切片（或Raphael稱之為扇區）。 有人知道該怎么做嗎？ 我發現如果var pie是我的餅圖，則可以使用以下方法獲得特定的切片：

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

但是，當我嘗試用動畫（特別是更改其大小）來更改切片時，該操作會失敗（分割不是正確的方法嗎？）：

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

對處理單個切片的任何見解都將非常有幫助。

Answer 1

我非常尷尬地意識到，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的圓，我可以使用諸如此類的segment自定義屬性用切片填充該圓（假設我的頁面上有一個div，其ID為holder）：

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

然后，我可以通過對segment屬性設置動畫來對我的paths數組中的切片進行動畫處理：

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

我了解其中一些，但我不了解。 但是上面的代碼將起作用（我檢查了）。