javascript - D3 按钮输入更改数据（堆积条形图）

Question

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

我的问题是修改此代码以使条形图堆叠。我对 D3 中的更新功能不太熟悉（我从未了解过它），所以我一直在尝试将更多的“rect”对象附加到“u”变量中。它会在第一次正确加载（我期望的所有“rect”对象），但是每当在按钮上调用更新方法时，点击所有绘制的都是附加“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 x(d.group); })
      .attr("y", function(d) { return y(d.value2 + d.value1); })
      .attr("width", x.bandwidth())
      .attr("height", function(d) { return height - y(d.value1); })
      .attr("fill", "#69b3a2")

标签： javascriptd3.jsgraphvisualizationstacked-chart