D3 按钮输入更改数据堆积条形图

如何解决D3 按钮输入更改数据堆积条形图

我正在做一个项目，我正在制作多个 D3 堆积条形图。这个想法是，当按下按钮时，绘图将使用不同的数据集重新加载，类似于显示的代码 here。

我的问题是修改此代码以使条形图堆叠。我不太熟悉 D3 中的更新功能（我从未了解过它），所以我一直试图将更多的“rect”对象附加到“u”变量中。它会在第一次正确加载（包含我期望的所有“rect”对象），但是每当在按钮上调用 update 方法时，单击所有绘制的都是附加“rect”调用的第二次迭代。如果有人知道如何将此代码用于堆叠条形图功能，我将不胜感激。

作为参考，这是我一直在尝试的

  u
    .enter()
    .append("rect") // Add a new rect for each new elements
    .merge(u) // get the already existing elements as well
    .transition() // and apply changes to all of them
    .duration(1000)
      .attr("x",function(d) { return x(d.group); })
      .attr("y",function(d) { return y(d.value1); })
      .attr("width",x.bandwidth())
      .attr("height",function(d) { return height - y(d.value1); })
      .attr("fill","#69b3a2")
  u
    .enter()
    .append("rect") // Add a new rect for each new elements
    .merge(u) // get the already existing elements as well
    .transition() // and apply changes to all of them
    .duration(1000)
      .attr("x",function(d) { return y(d.value2 + d.value1); })
      .attr("width","#69b3a2")