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

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

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

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

我更新了您的 codepen 中的数据源，使每个数据集都增加一个。尝试点击 data1、data2、data3...等。您会看到每次，由于数据集每次增长一个，因此在 dom 中需要一个新元素，因此添加了与 CURRENT 数据集相对应的 p 元素。请注意，当您向后退时，元素不会消失。这就是出口的用武之地...我将使用another codepen 来说明这个概念：

在这个 codepen 中，您会看到我正在使用“exit”来删除当前数据集中不存在的任何其他 dom 元素。然而，这假设其余数据是相同的。

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

如果其中有任何不清楚或对您没有任何意义，请告诉我。