d3.js-饼图的圆弧绘制上的平滑过渡 [英] d3.js - Smooth transition on arc draw for pie chart

问题描述

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

I have put together a pie chart in d3 and am using a transition and delay for when each of the arcs are getting drawn.

代码段:

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

工作小提琴

我想实现更平滑的过渡，以使每个圆弧在绘制到绘制时似乎从一个弧形到另一个弧形依次增长，而不是像现在这样立即出现.

I'd like to achieve a smoother transition so that each arc appears to grow in sequence from one to the other as they are drawn until, rather than just appear immediately like they do now.

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

Can someone give me some help? Thanks

推荐答案

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

I can suggest 2 ways to do this animation:

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

Animation 1 done with the help of delay here one slice grows and then next slice will grow.

//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 每个切片的持续时间都与@持续增长

Animation 2 Each slice grows @same time done with duration

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

工作代码此处

希望这会有所帮助！

这篇关于d3.js-饼图的圆弧绘制上的平滑过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！