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

其中一些我明白，其中一些我不知道。但上面的代碼將工作（我檢查）。