javascript - 在滚动上按类别删除元素

Question

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

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

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

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() 没有完成这项工作？

Answer 1

关于您的方法的三点观察:

首先，根据d3手册 transitions:

remove: remove the selected elements when the transition ends.

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

第二，来自同一手册:

Interrupting a transition on an element has no effect on any transitions on any descendant elements. (...) you must therefore interrupt the descendants: selection.selectAll("*")

您应该通过执行d3.selectAll(".nancygraphs").interrupt().selectAll("*").interrupt()来调用两者的中断。

第三，将鼠标或滚动输入直接耦合到您的逻辑从来都不是一个好主意(当您直接将输入事件耦合到例如附加转换时，您可能会执行数千次):您是否使用了 debounce功能？强烈推荐 lodash 实现。

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