D3.js 单击更新 dom 元素文本

Question

请参阅 my codepen 了解我正在做的事情。

当我点击图例（左上角）时，我希望数据集显示在我用 C3.js

制作的图表下方

目前，当您单击任何图例项时，数据会附加到具有 p 元素的 DOM。问题是当您单击不同的图例项时，这些元素中的文本不会被清除和更新。完成此操作的代码是第 55-61 行

    .on('click', function (id) {
    chart.data(id)[0].values.map( obj => console.log(obj.value))
    d3.select('#values').selectAll("p")
      .data(chart.data(id)[0].values)
      .enter()
      .append('p')
      .text(function(d) { return d.value })

单击图例项时，如何让 D3 清除 #values 中的值并更新为新数据？我原以为 d3 会自动更新值，但它只显示被点击的第一个数据集。

Answer 1

我想我解决了你的问题。每次添加之前只需删除元素。这是点击方法的主要部分：

chart.data(id)[0].values.map( obj => console.log(obj.value))
    d3.selectAll('.legend_values')
      .remove();
    d3.select('#values').selectAll("p")
      .data(chart.data(id)[0].values)
      .enter()
      .append('p')
      .text(function(d) { return d.value })
      .classed('legend_values', true);

https://codepen.io/deweyredman/pen/RKeOJp?editors=1010

现在，解释一下为什么您所做的不起作用。在点击方法上，您使用了 "enter"。这是怎么回事，只要 DOM 中没有元素与绑定数据匹配，就会执行 enter 之后的代码。由于单击一次后始终有相同数量的 p 元素对应于数据集中的元素，因此输入代码没有执行任何操作。现在，如果有任何其他元素，enter 方法会捕获它们，并且您会看到那里发生了变化...让我向您展示 in this codepen.

我更新了您代码笔中的数据源，使每个数据集增加一个。尝试单击数据 1、数据 2、数据 3 等。你会看到每次，因为 dom 中需要一个新元素，因为数据集每次都增长一个，所以添加了对应于 CURRENT 数据集的 p 元素。请注意，当您向后移动时，元素不会消失。这就是 exit 的用武之地...我将 another codepen 来说明这个概念：

在此代码笔中，您会看到我正在使用 "exit" 删除当前数据集中不存在的任何其他 dom 元素。但是，这假设其余数据相同。

我的 final codepen 说明了在将数据绑定到要追加的 p 元素之前，我每次都使用退出技术将数据重置为 nil。这支笔实际上实现了与我原来的那支笔相同的功能。这里唯一的区别是我明确地取消绑定和绑定数据，而在我原来的数据中，我只是核对 p 元素以便每次都触发 enter 方法。

如果您对此有任何不清楚或不明白的地方，请告诉我。

D3.js 单击更新 dom 元素文本

D3.js update dom element text on click

javascript

d3.js

c3.js