D3饼图未正确更新

问题描述 投票:1回答:1

我得到了以下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/

非常感谢您的帮助。

d3.js graph data-visualization pie-chart updating
1个回答
0
投票

这是四年来太迟了...

在PieGenUpdater中更改

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

to

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

在您的更新函数中,您是在元素而不是元素的正下方添加了来自数据集1的其他路径

© www.soinside.com 2019 - 2024. All rights reserved.