且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

D3.js - 具有多个环和动画过渡的圆环图

更新时间:2022-10-17 12:16:01

You need to add the .transition method to your vis

var path = gs.selectAll("path")
    .data(function(d) { return pie(d); })
  .enter().append("path")
//added line//
    .transition().duration(750).attrTween("d", arcTween)
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", function(d, i, j) { return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d); });

//added tween function
function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}

I just referenced this site

Here is a forked fiddle

It's not clear as to how you want to animate the charts.

相关阅读

技术问答最新文章