d3js - 如何为嵌套弧制作动画

Question

我的客户要求创建多个弧。 我为此找到了解决方案。但是我仍然不知道如何将动画添加到pies中。

有人帮我吗？

这是代码：

var dataset = {
  apples: [53245, 28479, 19697, 24037, 40245],
  oranges: [53245, 28479, 19697, 24037, 40245],
  lemons: [53245, 28479, 19697, 24037, 40245],
  pears: [53245, 28479, 19697, 24037, 40245],
  pineapples: [53245, 28479, 19697, 24037, 40245],
};
var width = 460,
    height = 300,
    cwidth = 25;
var color = d3.scale.category20();
var pie = d3.layout.pie()
    .sort(null);
var arc = d3.svg.arc();
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
var path = gs.selectAll("path")
    .data(function(d) { return pie(d); })
  .enter().append("path")
    .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); });

现场演示

但是如何将动画添加到每个馅饼中呢？

Answer 1

每次

执行此操作时，您都会覆盖arc innerRadius并outerRadius：

.attr("d", function(d, i, j) { return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d); })

因此，当您在最后调用tweenPie时，它使用的是您的arc处于的任何最终状态。通过在过渡之前添加延迟，您可以更清楚地看到这一点

.transition()
.delay(1000) // add this
.duration(3000)
.attrTween('d', tweenPie);

因此，请为每行值定义不同的arc，或者在补间派调用中重置弧内/外半径，以匹配要绘制的任何数据行。