D3 饼图未正确更新

Question

我得到了以下 D3 v4 饼图，每次我尝试更新它时，数据都没有正确更新。我一直在阅读其他一些例子，但似乎无法让它发挥作用。当前更新函数如下所示：

function PieGenUpdater(data, colourRangeIn) {
    var dataset = data;
    var width = 400;
    var height = 400;
    var radius = Math.min(width, height) / 2;

    var arc = d3.arc()
                .innerRadius(radius/1.5)
                .outerRadius(radius);

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

    var svg = d3.select('#c-pie');

    var path = svg.selectAll('path').data(pie(dataset));

    path.enter()
        .append("path")
        .attr('fill', function(d, i) {
            return d.data.color;
        })
        .attr("d", arc)
        .each(function(d) {this._current = d;} );

    path.transition()
        .attrTween("d", arcTweenCoverage);

    path.exit().remove();
    // 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 arcTweenCoverage(a) {
      var i = d3.interpolate(this._current, a);
      this._current = i(0);
      return function(t) {
        return arc(i(t));
      };
    }

}

https://jsfiddle.net/mahsan/zup6kafk/

非常感谢任何帮助。

Answer 1

这是迟了 4 年的答案...

在 PieGenUpdater 中更改

var path = svg.selectAll('path').data(pie(dataset));

至

var path = svg.select('g').selectAll('path').data(pie(dataset));

在您的更新函数中，您将数据集 1 中的其他路径直接添加到元素下而不是元素下

D3 饼图未正确更新

D3 Pie chart not updating correctly

updating

data-visualization

graph

d3.js

pie-chart