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饼图未正确更新

1 个答案: