如何在d3js中更新分組的條形圖

Question

在這種plunker我已經嘗試基於以類似的方式，以新的CSV數據更新吧這個 。

它獲取新數據並更新矩形，但不會刪除先前的數據。

我不知道代碼的哪一部分不能正常工作，在以前的嘗試中，我省略了.attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; })並獲得最左邊的一組條形圖以更新和刪除先前的數據，但其他組均未顯示。

感謝任何幫助！

編輯： 在這里上傳了一個工作示例

以下是相關代碼：

let bars = g.selectAll(".test")
    .data(data)
bars = bars.enter().append("g")
    .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; })
    .selectAll("rect")
    .data(function(d) { 
        return keys.map(function(key) { 
            return {key: key, value: d[key]}; 
        }); 
    })
bars = bars
  .enter().append("rect")
    .attr("width", x1.bandwidth())
    .attr("x", function(d) { return x1(d.key); })
    .attr("fill", function(d) { return z(d.key); })
    .merge(bars)

bars.transition()
    .duration(750)
    .attr("y", function(d) { return y(d.value); })
    .attr("height", function(d) { return height - y(d.value); });

bars.exit().remove();

Answer 1

圖表中的圖層/組似乎沒有根據新數據進行更新。 您可以對酒吧的輸入，更新和退出代碼進行以下更改：

var barGroups = g.selectAll("g.layer").data(data); 
barGroups.enter().append("g").classed('layer', true)
    .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });

barGroups.exit().remove(); 

var bars = g.selectAll("g.layer").selectAll("rect")
    .data(function(d) { 
        return keys.map(function(key) { 
            return {key: key, value: d[key]}; 
        }); 
    });
bars.enter().append("rect").attr("width", x1.bandwidth())
    .attr("x", function(d) { return x1(d.key); })
    .attr("fill", function(d) { return z(d.key); })
    .transition().duration(750)
    .attr("y", function(d) { return y(d.value); })
    .attr("height", function(d) { return height - y(d.value); });

bars
    .transition().duration(750)
    .attr("y", function(d) { return y(d.value); })
    .attr("height", function(d) { return height - y(d.value); });

bars.exit().remove();

因此，如果您看一下代碼，將首先處理鋼筋組/層，然后再處理實際的鋼筋，即矩形。 讓我知道這是否無效。

希望這可以幫助。 :)