将动画选项添加到 raphaeljs 饼图答案

【问题标题】：add the animation option to raphaeljs pie chart将动画选项添加到 raphaeljs 饼图
【发布时间】：2013-03-14 02:57:22
【问题描述】：

我想用 raphaeljs 插件绘制动画饼图；我在 g.raphaeljs 库中找到了一个饼图函数（Paper.piechart），这是他们相关的演示

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

但我不知道如何在不重新渲染绘图的情况下为该图表设置动画（执行事件时）喜欢这个演示：

http://raphaeljs.com/growing-pie.html 画换句话说，我想将第二个演示的动画选项添加到第一个演示中。谁能帮帮我？

【问题讨论】：

他正在使用customAttributes 绘制饼图并为其设置动画。看看页面源代码。

标签： svg raphael graphael

【解决方案1】：

这是一个 Raphael 饼图的工作演示，它在创建时增长，并在鼠标悬停时具有切片反弹效果：

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

【讨论】：