在滚动过程中多次调用D3.js转换是否昂贵？

我有一个滚动事件监听器，当页面击中特定的滚动目标时，触发D3.js转换。动画效果很好，不会滞后，但每个滚动位置都会调用该过渡。这个贵吗？在第一个draw()之后#mySvgShape设置为fill-opacity:0.8。在滚动期间继续调用转换是否是一个问题？在滚动过程中多次调用D3.js转换是否昂贵？

scrollPosition是滚动页面的百分比（0到1）。

function draw(scrollPosition) { 
     if (scrollPosition > 0.2 && scrollPosition < 0.4) { 
     el.select('#mySvgShape') 
     .transition() 
     .style("fill-opacity", "0.8"); 
     }else{ 
     el.select('#mySvgShape') 
     .transition() 
     .style("fill-opacity", "1e-6"); 
     }

来源

2017-03-14 jm22

在调用转换之前检查元素的不透明度。 –

好的建议。谢谢，杰拉尔多。 – jm22

不用担心。默认的持续时间是250ms。所以，更好的方法是检查是否有任何主动转换。 –

您可以检查是否有任何转换发生，如果是，请不要再次调用转换。

为了做到这一点，使用d3.active：

d3.active（节点[，名称]）：

返回具有指定名称的指定节点上的活性过渡，如果有的话。

所以，你if可以改成这样：

if (percentage > 0.2 && percentage < 0.4) { 
    if (!d3.active(d3.select("#dam-fill").node())) { 
     d3.select("#dam-fill") 
      .transition() 
      .duration(5000) 
      .style("fill-opacity", "1") 
      .attr("transform", "translate(-50, -200) scale(1.2,1.2)"); 
    } 
}

这是你更新的提琴：https://jsfiddle.net/gerardofurtado/ze2dc976/

我调整到5000毫秒的过渡只是为了显示，如果向上滚动或者在转换发生时停下来，它不会停止（就像在你的小提琴中一样）。因此，不仅在滚动中多次调用转换是广泛的，它会搅乱转换。

来源

2017-03-21 12:39:59

在滚动过程中多次调用D3.js转换是否昂贵？

回答

相关问题