为什么我的d3圆环图会在更新时受到扭曲？

Question

我使用d3渲染圆环图，它可以在第一次渲染数据时正常工作。以下是截图：

但是在更新数据时，我的组件变得扭曲如下：

下面的代码用于更新：

var pie = d3.layout.pie()
                            .sort(null)
                            .value(function(d) {
                                return d.val;
                            });

            var arc = d3.svg.arc()
                            .innerRadius(chart_r * 0.7)
                            .outerRadius(function() {
                                return (d3.select(this).classed('clicked'))? chart_r * 1.08
                                                                           : chart_r;
                            }).padAngle(0.05);

            // Start joining data with paths
            var paths = charts.selectAll('.donut')
                            .selectAll('path')
                            .data(function(d, i) {
                                return pie(d.data);
                            });

            paths
                .transition()
                .duration(10000)
                .attr('d', arc);

            paths.enter()
                .append('svg:path')
                    .attr('d', arc)
                    .style('fill', function(d, i) {
                        return color(i);
                    })
                    .style('stroke', '#FFFFFF')
                    .on(eventObj)

            paths.exit().remove();

可以找到完整的代码：“https://codepen.io/zhaoyi0113/pen/OQvJor”。您可以单击刷新数据按钮以查看问题。

如何使其平滑更新而不是扭转？