javascript - 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

现在，解释一下为什么你的方法不起作用。在单击方法中，您使用了“输入”。发生的事情是，每当 DOM 中没有元素与绑定(bind)数据匹配时，就会执行 Enter 之后的代码。由于单击一次后，数据集中的元素对应的 p 元素数量始终相同，因此输入代码不会执行任何操作。现在，如果有任何其他元素，enter 方法会捕获它们，您会看到其中的变化...让我向您展示 in this codepen.

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

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

我的final codepen说明了我每次在将数据绑定(bind)到要附加的 p 元素之前使用退出技术将数据重置为零的位置。这支笔实际上实现了与我原来的笔相同的效果。这里唯一的区别是我显式地解除绑定(bind)和绑定(bind)数据，而在我原来的数据中，我只是对 p 元素进行核攻击，以便每次都会触发 Enter 方法。

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