Javascript 如何在d3js中更新分组条形图

在此中，我尝试以与类似的方式基于新的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();

---

图表中的图层/组似乎没有根据新数据进行更新。以下是您可以对条形图的输入、更新和退出代码所做的一些更改：

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();

因此，如果您查看代码，首先处理的是条形图组/层，然后是实际的条形图，即矩形。如果这不起作用，请告诉我

---

希望这有帮助。：）

太棒了！是的，请这样做。谢谢。：）上传