Javascript 在滚动中按类删除元素

注意：我问了，但我现在正在尝试一种不同的技术，这导致了一个类似的问题，无法用公认的有效答案解决

这一次，我希望在每个绘图函数中使用selection.remove，而不是初始化所有不透明度为0的图形，并使用单独的函数更改每个步骤调用的不透明度。我想这样做，以便视图外的图形不会妨碍我在当前图形上可能需要的任何鼠标悬停交互

例如，我有一些函数可以清除现有的图形，然后绘制带有一些过渡的当前图形：

var makeCircle0 = function() {
  d3.selectAll(".nancygraphs").interrupt().remove()
  g.append("circle")
    .attr("cx", 50)
    .attr("cy", 100)
    .attr("r", 20)
    .attr("fill", "red")
    .attr("id", "red")
    .attr("opacity", 0)
    .transition()
    .duration(1000)
    .attr("opacity", 1)
    .attr("class", "nancygraphs")
}

这些函数放在一个列表中

var activateFunctions = [];
activateFunctions[0] = makeCircle0;
activateFunctions[1] = makeCircle1;
activateFunctions[2] = makeCircle2;
activateFunctions[3] = makeCircle3;

根据步骤的不同，调用函数以绘制正确的图形

function handleStepEnter(response) {
  console.log(response)
  step.classed('is-active', function(d, i) {
    return i === response.index;
  })

  figure.select('p').text(response.index);
  figure.call(activateFunctions[response.index]) // HERE!
}

---

举例说明。基本上，若你们快速地来回滚动，那个么旧的图形就不会被清除，你们会同时注意到视图中有几个图形。为什么d3.selectAll.nancygraphs.interrupt.remove不执行此任务？

关于您的方法有三个观察结果：

首先，根据d3手册 :

移除：在过渡结束时移除选定图元

移除不会中断已经运行的转换-它仅在所有转换停止时移除。更具体地说，它似乎在元素的_transition _.count达到0时起作用。你可以考虑在这里使用非D3删除实现。g、

第二，来自同一手册：

中断元素上的转换不会影响任何子元素上的任何转换。。。因此，必须中断子体：selection.selectAll*

您应该通过执行d3.selectAll.nancygraphs.interrupt.selectAll*.interrupt调用这两个函数的中断

第三，当您将输入事件直接耦合到e时，直接将鼠标或滚动输入耦合到您的逻辑从来都不是一个好主意。G附加一个转换时，您可能会执行成千上万次：您是否使用了函数？强烈建议使用lodash

在尝试了这些修改之后，我认为您当前的问题已经解决了。如果不是，调试的另一种方法是记录/覆盖元素的_transition__.count属性