Question

我在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);

工作fiddle

我希望实现更平滑的过渡，以便每个弧线在绘制之前看起来按顺序从一个到另一个逐渐增长，而不是像现在一样立即出现。

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

Answer 1

我可以建议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);
   }
});

工作示例here

动画2 每个切片增加@same时间，持续时间为

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);
   }
});

工作代码here

希望这有帮助！

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

1 个答案: