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

Select and append a single element in a node with D3

本文关键字：单个 元素 选择 D3 节点 使用      更新时间：2023-09-26

我有一个数据集，看起来像这样：

    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)，它将不起作用，因为在第一次运行时并没有这样的元素。

在这个问题中，建议使用.select().data().enter().append()，由于某种原因，它在我的情况下似乎不起作用。

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

我昨天将此链接到另一篇帖子，我认为它也100%适用于您的帖子。输入、更新、退出是更新数据不可或缺的一部分。

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

相关文章：