D3.js之饼图动画

学习D3差不多一个月了。最近看了刚看了echart，发现他里面的饼图初始化的时候是从无到有的打开一圈。所以想要模仿这个动画效果。

如果想要学习D3.js饼图布局可以去看这个网站： http://www.ourd3js.com

开始的想法是这样的：先给出饼图从无到有展开花费的所有时间，再设计饼图每个弧所占的比例，乘以动画总时间，就每个弧所要执行的时间。

在用一个delaytime变量保存每个弧之前所有弧需要展开的时间总和。这是用来延迟这个弧动画时间，从而每个弧的无缝连接动画。

上面就是我实现的代码。但是非常丑陋，并不是那种平滑展开那种效果。

然后最近看了一个API。

transition.attrTween - 在两个属性值之间平滑地过渡。（本人英语不是太好，感谢前人翻译的中文API）

效果如下：

上面看起来的效果就差不多了。

然后填饼图添加文字。因为文字是直接显示上面的，即使弧没有出来文字也在上，感觉不好看，可以跟上面一样给text设置延迟出来的动画。

			arcs.append("text")
				.attr("transform", function(d) {
					//arc.centroid计算出每个弧的中心位置
					return "translate(" + arc.centroid(d) + ")";
				})
				.attr("text-anchor", "middle")
				.text(function(d) {
					return d.data;
				})

也可以给饼图之间添加一些空隙

			d3.selectAll("path").attr("transform",function(d,i){
					var midAngle=(d.startAngle+d.endAngle)/2;
					return "translate("+(1*Math.sin(midAngle))+","+(-1*Math.cos(midAngle))+")";
				})

也可以给添加饼图添加鼠标移入移出事件

这边我实现的是往外移动一点点，也可以实现移入的时候让它变大，echart的饼图就是这样的效果

arcs.select("path").on("mouseover",function(d,i){
					d3.select(this).transition()
						.duration(500)
						.ease("linear")
						.attr("transform", function(d, i) {
							var midAngle = (d.startAngle + d.endAngle) / 2;
							return "translate(" + (20 * Math.sin(midAngle)) + "," + (-20 * Math.cos(midAngle)) + ")";
						})
				})
				.on("mouseout",function(d,i){
					d3.select(this).transition()
						.duration(500)
						.ease("linear")
						.attr("transform", function(d, i) {
							var midAngle=(d.startAngle+d.endAngle)/2;
					return "translate("+(1*Math.sin(midAngle))+","+(-1*Math.cos(midAngle))+")";
							return "translate(0)";
						})
				})

还有给饼图添加一些信息，可以查看这位大神的博客：http://blog.csdn.net/lzhlzz/article/details/46508041

然后也可以将这些数字放在外面，用连线连接着，大概思路就是将现在文字水平向左或向右平移一段距离（根据弧中心在左边右边来判断）

然后将两点信息保存下来，添加一个polyline 然后传给point就可以了