我已经创建了一个有效的版本，并将其发布在这里：http
:
//www.ninjaPixel.io/StackOverflow/doughnutTransition.html（由于某些原因，我无法获得在小提琴演奏中的过渡效果，因此将其发布到我的网站来代替）。
为了使代码更清晰，我省略了您的标签，将“ data”重命名为“
data1”，并且卡在某些单选按钮中以在数据数组之间切换。以下代码片段显示了重要的位。您可以从上面的我的页面中获取完整的代码。
var svg = d3.select("#chartDiv").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("id", "pieChart") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");var path = svg.selectAll("path") .data(pie(data1)) .enter() .append("path"); path.transition() .duration(500) .attr("fill", function(d, i) { return color(d.data.crimeType); }) .attr("d", arc) .each(function(d) { this._current = d; }); // store the initial anglesfunction change(data){ path.data(pie(data)); path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs}// Store the displayed angles in _current.// Then, interpolate from _current to the new angles.// During the transition, _current is updated in-place by d3.interpolate.function arcTween(a) { var i = d3.interpolate(this._current, a); this._current = i(0); return function(t) { return arc(i(t)); };}您可能会发现Mike
Bostock的这段代码很有帮助，这是我学习如何做到的地方。
