將動畫選項添加到raphaeljs餅圖

我想用raphaeljs插件繪製動畫餅圖; 而且我發現在g.raphaeljs庫餡餅圖表功能（Paper.piechart），這是thier相關演示將動畫選項添加到raphaeljs餅圖

http://g.raphaeljs.com/piechart2.html

但我不知道如何製作動畫這個圖表（當執行一個事件）沒有reRendreing情節這樣的演示：

http://raphaeljs.com/growing-pie.html 畫換句話說，我希望第二個演示的動畫選項添加到第一個。任何人都可以幫助我嗎？

2013-03-14 Z4k4r14

http://raphaeljs.com/ reference.html＃Paper.customAttributes）來繪製和製作餅圖切片的動畫。看看頁面源代碼。 – 2013-03-16 20:21:43

這是生長在創作和對鼠標懸停切片反彈效果拉斐爾餅圖的工作演示：他是用[customAttributes]使用（

<div id="pie"></div> 
<script> 
var paper = Raphael("pie", 400, 200); 
var pie = paper.piechart(
    100, // pie center x coordinate 
    100, // pie center y coordinate 
    90, // pie radius 
    [18.373, 18.686, 2.867, 23.991, 9.592, 0.213], // values 
    { 
    legend: ["Windows/Windows Live", "Server/Tools", "Online Services", "Business", "Entertainment/Devices", "Unallocated/Other"] 
    } 
); 

//animation - grow pie  
pie.each(function(){ 
    this.sector.scale(0, 0, this.cx, this.cy); 
    this.sector.animate({ transform: "s1 1 " + this.cx + " " + this.cy }, 1000, "bounce"); 
}); 

// Bounce pie slice 
pie.hover(function() { 
    this.sector.stop(); 
    this.sector.animate({ transform: "s1.1, 1.1 " + this.cx + " " + this.cy }, 500, "bounce"); 
    this.label[0].attr({ r: 7.5 }); 
    this.label[1].attr({ "font-weight": 800 }); 
}, 

function() { 
    this.sector.animate({ transform: "s1 1 " + this.cx + " " + this.cy }, 500, "bounce"); 
    this.label[0].animate({ r: 5 }, 500, "bounce"); 
    this.label[1].attr({ "font-weight": 400 }); 

}) 

</script>

來源

2014-01-26 11:59:12

將動畫選項添加到raphaeljs餅圖

回答

相關問題