d3js - 如何将动画制作成嵌套弧？

Question

我的客户要求创建多个弧。我找到了解决方案。但我仍然不知道如何将动画添加到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); }); 。

任何人帮助我？

这是代码：

{{1}}

Live Demo

但是如何为每个馅饼添加动画？

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，要么在tweenPie调用中重置弧内/外半径以匹配您正在绘制的任何数据行。