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.active（node [，name]）：

返回指定节点上具有指定名称的活动转换（如果有）。

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

滚动期间多次调用D3.js转换是否很昂贵？

1 个答案: