Question

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

    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元素的相同故事。如果我只是运行.select(g.stacked-bars-container)，它就不会起作用，因为首次运行时没有这样的元素。

在此question中，我们建议执行.select().data().enter().append()，但出于某种原因，这似乎不适用于我的情况。

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

Answer 1

我昨天把它与另一篇文章联系起来，我认为它也适用于你的100％。输入，更新，退出是更新数据的一个组成部分。

http://bost.ocks.org/mike/join/这是一个非常好的例子。

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

1 个答案: