在滚动时按类删除元素答案

【问题标题】：Removing elements by class on scroll在滚动时按类删除元素
【发布时间】：2019-12-16 14:37:25
【问题描述】：

注意：我问过this question about interrupting transitions during a scroll，但现在我正在尝试一种不同的技术，这会导致类似的问题无法通过接受（且有效）的答案得到解决。

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

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

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!
}

Here is a jsfiddle 来说明。基本上，如果您快速来回滚动，则旧图形不会被清除，您会注意到同时出现多个图形。为什么d3.selectAll(".nancygraphs").interrupt().remove() 不做这项工作？

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

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

首先，根据d3手册上 transitions:

remove：在过渡结束时移除选中的元素。

移除不会中断已经运行的转换 - 它只会在所有转换都停止时移除。更具体地说，它似乎在元素的__transition__.count 达到0 时起作用。您可以考虑在此处使用非 d3 删除实现，例如。 G。 jQuery.

第二，来自同一手册：

中断元素上的转换不会影响任何后代元素上的任何转换。 (...) 因此，您必须打断后代：selection.selectAll("*")

您应该通过 d3.selectAll(".nancygraphs").interrupt().selectAll("*").interrupt() 对 both 调用中断。

第三，直接将鼠标或滚动输入与您的逻辑耦合从来都不是一个好主意（当您直接将输入事件耦合到例如附加转换时，您可能会这样做数千次）：您使用@ 987654323@函数？强烈推荐使用 lodash 实现。

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

【讨论】：