d3.js - 中断 D3.js 中的滚动转换

Question

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

Here is a jsfiddle基于此example by the scrollama author 。在我的示例中，彩色点应一次淡入一个。如果您要快速滚动到末尾，则不应显示断断续续的点。以下片段显示了我如何设置转换:

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

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的。 当然，如果您有许多元素，则可以对其进行细化，以便仅对正在过渡的任何元素(而不是那些已经隐藏的元素)应用过渡，以减少事件过渡的数量。

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