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

现在，解释为什么你的东西不起作用。在click方法上，您使用了“enter”。这是怎么回事，只要DOM中没有元素匹配绑定数据，就会执行enter后的代码。由于在单击一次后，数据集中的元素始终存在相同数量的p元素，因此输入代码不会执行任何操作。现在，如果有任何其他元素，enter方法会捕获它们，你会看到一个更改...让我告诉你in this codepen.

我更新了您的codepen中的数据源，以便为每个数据集增加一个。尝试单击data1，data2，data3 ......等。每次都会看到，因为dom中需要一个新元素，因为数据集每次增长一个，所以p元素的添加对应于CURRENT数据集。请注意，当您向后移动时，元素不会消失。这就是退出的地方......我将使another codepen来说明这个概念：

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

我final codepen说明了在将数据绑定到正在追加的p元素之前，每次使用退出技术将数据重置为nil的位置。这支笔实际上与我原来的笔完全相同。这里唯一的区别是我明确解除绑定并绑定数据，而在我的原始数据中，我只是在对p元素进行核对，以便每次都触发enter方法。

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

D3.js在点击时更新dom元素文本

1 个答案: