d3.js-圆弧绘制的平滑过渡饼图

mindparse 发表于 Dev

心智分析

我在d3中放了一个饼图，并在绘制每个圆弧时使用了过渡和延迟。

代码段：

var path = g.selectAll("path")
    .data(pie(dataset.apples))
    .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .transition()
    .delay(function(d, i) {
        return i * 100;
    })
    .duration(500)
    .attr("d", arc);

工作提琴

我想实现一个更平滑的过渡，以使每条弧线在绘制到绘制时都从一个弧形到另一个弧形依次增长，而不是像现在这样立即显示。

有人可以给我些帮助吗？谢谢

西里尔·谢里安（Cyril Cherian）

我可以建议2种制作动画的方法：

动画1是在延迟的帮助下完成的，此处会增长一个切片，然后再扩展下一个切片。

//the tween will do the animation as end angle increase over time
var path = g.selectAll("path")
    .data(pie(dataset.apples))
    .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .transition()
    .delay(function(d, i) {
      return i * 800;
    })
        .attrTween('d', function(d) {
   var i = d3.interpolate(d.startAngle+0.1, d.endAngle);
   return function(t) {
       d.endAngle = i(t);
     return arc(d);
   }
});

这里的工作示例

动画2每个切片的增长时间与持续时间相同

var path = g.selectAll("path")
    .data(pie(dataset.apples))
    .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .transition()
    .duration(function(d, i) {
      return i * 800;
    })
        .attrTween('d', function(d) {
   var i = d3.interpolate(d.startAngle+0.1, d.endAngle);
   return function(t) {
       d.endAngle = i(t);
     return arc(d);
   }
});

这里的工作代码

希望这可以帮助！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。