Javascript 使用D3在节点中选择并附加单个元素

我有一个数据集，如下所示：

    var values = [
      {label: 'Label 1', values: [8, 2, 5, 9, 3, 6]},
      {label: 'Label 2', values: [5, 4, 3, 4, 1, 0]},
      {label: 'Label 3', values: [3, 8, 3, 9, 0, 1]},
      {label: 'Label 4', values: [1, 6, 3, 9, 3, 6]}
    ]

我已经用这些数据制作了一个堆叠条形图，所以现在我有4个区域，每个区域都有一个标签，并且分别有一组堆叠条形图

我成功地使这段代码附加了4个区域作为其余视觉效果的容器：

    barElement = barsArea
      .selectAll('.bar-element')
      .data(values)
      .enter()
      .append('g')
      .attr({
        class: 'bar-element'
      });

但现在，首先我需要为每个区域添加标签，然后为每个区域添加堆叠的条容器和g元素

我现在要做的是：

    barElement.select('text').remove()

    var barLabel = barElement
        .append('text')
        .attr({
          class: 'bar-label'
        })
        .text(function (d, i) {
          return d.label
        })
      ;

这看起来不太酷，因为我每次更新图表时都必须手动删除它们。 与堆叠钢筋容器g元素相同的故事。如果我只运行.selectg.stacked-bar-container，它将不起作用，因为第一次运行时没有这样的元素

在本例中，建议这样做。select.data.enter.append由于某种原因在我的案例中似乎不起作用

---

所以，问题是，我如何在一个节点中找到一个元素，并在收到新数据时更新它，否则先添加这个元素，然后在第一次运行时更新？

我昨天将此链接到另一篇文章，我认为它100%适用于您的文章。输入、更新、退出是更新数据的组成部分

---

这是一个非常好的例子。

也许我错过了这一部分，但为什么需要手动删除文本？因为如果我添加而不删除，每次更新都会添加多个文本元素。恐怕我做得不对，如果做得好，我就不必做这些变通。但是barElement只包含您正在使用的新数据。输入，否？似乎我需要检查整个代码以使其正确，如果问题仍然存在，我将在得到更好的解决方案后尽快返回。谢谢