D3.JS之别人家的饼图动画

来源：互联网发布：淘宝分享有礼怎么设置编辑：程序博客网时间：2024/05/09 03:03

原文链接

最近看到D3的demo库中有一个例子，他是从无到有旋转开来。他这个动画效果的。

效果如下：

在来看看我之前写的效果：

对比一下就很容易看出来两个饼图旋转开来的区别了：

第一个是所有的弧都开始从无到有变化

第二个：是一个弧选旋转完成在到到下一弧开始旋转(具体实现看之前写的教程)

本篇主要来说说第一个的实现。

其实也没什么好说的，就是设置所有的弧的startAngle和endAngle都为0 然后向着原始的角度过渡，中间用attrTween来设置。

而我写的，只不过给每一个弧都添加delay时间：这个时间是之前所有弧展开需要的时间。

只不过想说的是作者的代码还是很简洁的不像我写的好长好麻烦。

基本的注释都写在里面了。如果有错误的话请指正。

<!DOCTYPE html><html><head><title>Pie Chart</title><script type="text/javascript" src="../../../js/d3.js"></script></head><body><script type="text/javascript">var width=960,height=500, radius = Math.min(width, height) / 2 - 10;var data=d3.range(10).map(Math.random).sort(d3.descending);//降序var color=d3.scale.category20();var arc=d3.svg.arc().outerRadius(radius);//定义了一个弧生辰器，外半径设置为radiusvar pie=d3.layout.pie();//定义一个饼图布局var svg=d3.select('body').append('svg').attr('width',width).attr('height',height).append('g').attr('transform',"translate("+width/2+","+height/2+")");//添加一个svg,设置宽高，在偏移到中心。var arcs=svg.selectAll('g.arc').data(pie(data))//绑定数据.enter().append('g')//添加g.attr('class',"arc");//定义一个arc类arcs.append('path')//添加路径.attr('fill',function(d,i){//根据i的下标给每一个元素添加不同的颜色。return color(i);}).transition()//设置动画.ease('bounce')//动画效果.duration(2000)//持续时间.attrTween('d',tweenPie)//两个属性之间平滑的过渡。.transition().ease("elastic").delay(function(d,i){return 2000+i*50})//设置了一个延迟时间，让每一个内半径不在同一个时间缩小。.duration(750).attrTween('d',tweenDonut);function tweenPie(b){//这里将每一个的弧的开始角度和结束角度都设置成了0//然后向他们原始的角度(b)开始过渡，完成动画。b.innerRadius=0;var i=d3.interpolate({startAngle:0,endAngle:0},b);//下面的函数就是过渡函数，他是执行多次最终达到想要的状态。return function(t){return arc(i(t));};}function tweenDonut(b){//设置内半径不为0b.innerRadius=radius*.6;//然后内半径由0开始过渡var i=d3.interpolate({innerRadius:0},b);return function(t){return arc(i(t));};}</script></body></html>

0 0