D3.js中的中断滚动过渡 [英] Interrupt scrolling transitions in D3.js

问题描述

我正在使用scrollama javascript库编写一篇草稿"文章，其中涉及在用户滚动时将D3图形从视图中移入或移出视图.多数情况下都可以正常工作，但是如果我滚动得太快，这些图形就会相互叠加.

I'm using the scrollama javascript library to write a "scrollytelling" article that involves transitioning D3 graphs in and out of view as the user scrolls. It is mostly working, but the graphs pile up on top of each other if I scroll too quickly.

这是基于此. github.io/scrollama/sticky-side/"rel =" nofollow noreferrer>"> scrollama作者的示例.在我的示例中，彩色圆点应该一次消失一次.如果要快速滚动到末尾，则不应出现间歇点.以下代码片段显示了我如何设置转换:

Here is a jsfiddle based on this example by the scrollama author. In my example, the colored dots should fade in one at a time. If you were to scroll quickly to the end, the intermittent dots should not show up. The following snippets show how I've set up the transitions:

我定义了一些创建图形"的函数，然后调用它们.

I define some functions that create my "graphs", and then call them.

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不透明.我对所有圈子/阶段都这样做.

Then, I make functions to handle the transitions. This one says to make the red circle fade in and put the other circles at 0 opacity. I do this for all the circles/stages.

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)处理滚动条的方式.

This section creates an array of my transition functions so that I can call them at specific steps in the page as you scroll. This is similar to how Jim Vallandingham handled his scroller.

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

最后，这将在页面的正确步骤调用所需的功能.它的作用是……但并非没有停止在上一步中触发的其他转换，从而导致在各个阶段出现多个点.

Finally, this calls the desired function at the right step in the page. Which it does... but not without halting the other transitions that got triggered in a previous step, resulting in multiple dots showing up at various stages.

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

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

如何防止这种情况?

推荐答案

如果您需要中断转换，则d3-transition有一种方法可用于此操作:

If you need to interrupt a transition, d3-transition has a method for that:

selection.interrupt();

这将取消所选内容上的过渡. 如果使用命名转换，则可以通过提供带有一个参数的中断来指定名称，该参数指示要取消的转换的名称.

This will cancel a transition on an selection. If using named transitions you can specify a name by providing interrupt with one argument indicating the name of the transition to cancel.

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

If this is a generic version of your function to show an element:

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

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

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

Without using selection.interrupt you set the opacity to zero, and then the next tick of any transition in progress continues to update the opacity and finishes carrying out the transition. By adding interrupt we avoid that. Here's an updated fiddle.

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

However, there is another solution - we can apply another transition on the elements that we want to not show. To do so we just replace the transition with a new one:

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

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

这将替换现有的未命名过渡(因为您的未命名过渡)并淡出元素，而不是一次全部隐藏它们.这是小提琴. 当然，如果您有很多元素，可以将其优化为仅对任何正在过渡的元素(而不是已隐藏的元素)应用过渡，以减少活动过渡的数量.

This will replace existing unnamed transitions (as yours are not named) and fade out elements, rather than simply hiding them all at once. Here's a fiddle of that. Of course if you have many elements this can be refined as to only apply a transition on any elements that are transitioning (not those that are already hidden) to reduce the amount of active transitions.

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

这篇关于D3.js中的中断滚动过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！