您的位置：首页 > Web前端 > JavaScript

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

2016-12-07 18:45 99 查看

原文链接

最近看到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);//定义了一个弧生辰器，外半径设置为radius

var 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){
//设置内半径不为0
b.innerRadius=radius*.6;
//然后内半径由0开始过渡
var i=d3.interpolate({innerRadius:0},b);
return function(t){return arc(i(t));};
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航