スクロール中に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.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ミリ秒への移行を変更または移行が起こっている間は、（あなたのフィドルのように）それは止まらない。したがって、スクロールで複数回トランジションを呼び出すだけでなく、トランジションを混乱させることになります。