arcTween(newAngle) { let self=this return function(d) { var interpolate = d3.interpolate(d.endAngle, newAngle); //在两个值间找一个插值 return function(t) { d.endAngle = interpolate(t); //根据 transition 的时间 t 计算插值并赋值给endAngle return arc(d); //返回新的“d”属性值 }; }; }
这个方法更详细的说明可以参考Arc Tween中的注释。
2、更新圆弧末尾的指针的原理同上，其中oldAngle是旧圆弧的结束角度。
//更新圆弧末端的指针标记，并且设置渐变动效 tick.transition() .duration(750) .ease(d3.easeElastic) //设置来回弹动的效果 .attrTween('transform', function(){ //设置“transform”属性的渐变，原理同上面的arcTween方法 var i = d3.interpolate(angleToDegree(oldAngle), angleToDegree(newAngle)); //取插值 return function(t) { return 'rotate('+ i(t) +')' }; })
至此，我们就成功制作了一个动态刷新的简介美观的SVG仪表盘。
结束
每次使用D3.js都会忍不住觉得它真是太强大、太有意思了~它就像是一个百宝箱，让我们最大限度地满足需求。