中断 D3.js 中的滚动转换

Question

我正在使用 scrollama javascript 库来编写一篇“滚动讲述”文章，其中涉及在用户滚动时将 D3 图形移入和移出视图。它大部分都在工作，但如果我滚动得太快，这些图表就会堆积在一起。

Here is a jsfiddle 基于此example by the scrollama author。在我的示例中，彩色圆点应该一次淡入一个。如果您要快速滚动到最后，则不应出现间歇性点。以下 sn-ps 显示了我是如何设置转换的：

我定义了一些创建“图表”的函数，然后调用它们。

var makeCircle0 = function(){

  g.append("circle")
    .attr("cx", 50)
    .attr("cy", 100)
    .attr("r", 20)
    .attr("fill", "red")
    .attr("class", "redcircle")

  g.selectAll(".redcircle")
    .attr("opacity", 0)
}

makeCircle0();

// Do this for makeCircle1, 2, and 3, also. 

然后，我创建函数来处理转换。这个说让红色圆圈淡入并将其他圆圈设置为 0 不透明度。我对所有圈子/阶段都这样做。

var showCircle0 = function(){

  g.selectAll(".redcircle")
  .transition()
  .duration(1000)
  .attr("opacity", 1)

  g.selectAll(".yellowcircle").attr("opacity", 0)
  g.selectAll(".greencircle").attr("opacity", 0)
  g.selectAll(".bluecircle").attr("opacity", 0)

}

本部分创建了一个我的转换函数数组，以便我可以在您滚动时在页面中的特定步骤调用它们。这类似于Jim Vallandingham handled his scroller。

var activateFunctions = [];
activateFunctions[0] = showCircle0;
activateFunctions[1] = showCircle1;
activateFunctions[2] = showCircle2;
activateFunctions[3] = showCircle3;

最后，这会在页面的正确步骤调用所需的函数。它确实......但并非没有停止在上一步中触发的其他转换，导致多个点出现在各个阶段。

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

  figure.call(activateFunctions[response.index])
}

如何防止这种情况发生？

Answer 1

如果您需要中断转换，d3-transition 有一个方法：

selection.interrupt();

这将取消选择的过渡。 如果使用命名转换，您可以通过为中断提供一个参数来指定名称，该参数指示要取消的转换的名称。

---

如果这是显示元素的函数的通用版本：

function show() {
  selectionToHide.attr("opacity",0);

  selectionToShow.transition()
     .attr("opacity",1);
}

不使用 selection.interrupt 将不透明度设置为零，然后任何正在进行的转换的下一个刻度继续更新不透明度并完成转换。通过添加中断，我们避免了这种情况。这是更新后的fiddle。

但是，还有另一种解决方案 - 我们可以对不想显示的元素应用另一种过渡。为此，我们只需将转换替换为新的：

function show() {
  selectionToHide.transition()
     .attr("opacity",0);

  selectionToShow.transition()
     .attr("opacity",1);
}

这将替换现有的未命名过渡（因为您的未命名）并淡出元素，而不是一次简单地隐藏它们。这是其中的fiddle。 当然，如果您有很多元素，则可以将其细化为仅对任何正在转换的元素（不是那些已经隐藏的元素）应用转换，以减少活动转换的数量。

我没有接触滚动，显示的圆圈应该有它的索引与显示的数字匹配，但似乎数字并不总是与滚动位置匹配，但这是一个单独的问题 em>