Question

这个问题有been asked before，但我不认为给定的解决方案是最干净的方法，所以我希望有人可能已经弄明白了。

<我正在使用d3.js生成多个饼图，并通过SQL查询动态更新它们。这是我的更新功能：

function updateCharts()
{
    var updatedDataSet = getDataSet();

    // Create a pie layout and bind the new data to it
    var layout = d3.layout.pie()
        .value(function(d, i) { return d[i].count; })
        .sort(null);

    // Select the pie chart
    var pieChartSVG = d3.selectAll("#pie");

    // Select each slice of the pie chart
    var arcsUpdate = pieChartSVG.selectAll("g.slice")
        .data(layout([updatedDataSet]))
        .enter();

    // Apply transitions to the pie chart to reflect the new dataset
    arcsUpdate.select("path")
        .attr("fill", function(d, i) { return color(i); })
        .attr("d", arc)
            .transition()
            .duration(1000)
            .attrTween("d", arcTween);
}

但它不起作用。如果我从.enter()中取出arcsUpdate，那么它可以正常工作，但会对每个图表应用相同的更改（数据和补间）。我可以通过对foreach()返回的元素执行pieChartSVG来解决这个问题，但除了在另一个问题中描述的方法之外，我无法想到这样做的方法。

我必须使用其他问题的解决方案，因为我必须继续前进，但它不是＆＃34;清洁＆＃34;解决方案，所以我很想知道是否有人知道更好的方法来处理它。

Answer 1

我认为您需要从.enter()中取出arcsUpdate，就像

一样

var arcsUpdate = pieChartSVG.selectAll("path")
    .data(layout([updatedDataSet]));

// Apply transitions to the pie chart to reflect the new dataset
arcsUpdate.enter()
    .append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc)
        .transition()
        .duration(1000)
        .attrTween("d", arcTween);

这是正确的方法。如果它对每个图表应用相同的更改（数据和补间）。请查看它们是否具有相同的约束力updateDataSet。

d3.js：更新多个饼图

1 个答案: