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

Question

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

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");
      }

Answer 1

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

要做到这一点，请使用d3.active

D3.活动(节点，名称)： 返回具有指定名称的指定节点上的活动转换(如果有的话)。

因此，您的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毫秒，只是为了表明，如果你在过渡过程中向上或向下滚动，它不会停止(就像在你的小提琴里一样)。因此，不仅在滚动中多次调用转换是扩展的，它还会破坏转换。