d3を使って全ページをスクロールする方法

Question

私はd3をパンしながら全ページをスクロールできるようにしたい。

ちょうどy軸上のeffect on challongeのようです。

これは私の試みです。

pan.call(d3.drag().on("drag", function dragged() { 
     // x axis 
     thisPosX += d3.event.dx; 
     g.attr("transform", "translate(" + thisPosX + ", 0)"); 
     g1.attr("transform", "translate(" + thisPosX + ", 0)"); 
     position.x = thisPosX; 
     // y axis. 
     var tmp = d3.event.dy; 
     if (tmp != -lastTmp) { 
      $window.scrollTo(0, $window.scrollY - tmp); 
      lastTmp = tmp; 
     } 
})); 

しかし、このコードではまだパンニングが非常に遅くなり、スパイクがあります。

これを行うにはより良い方法はありますか？btw、角度を使用しています。

Answer 1

あなたがしようとしていることはd3を必要としないと思います。確かに、イベントをd3にバインドできますが、ドラッグ動作は静的なキャンバスやsvgなどのコンテナ内に要素をドラッグするように設計されています。

私はこの作業を行う可能性があるCodepenが見つかりました。まず

は、私はChallongeのが何をしたか、あなたがそのソースコードに見ればことを、あなたはドラッグ動作を持っていますdivの中にSVGあなたをラップすることをお勧め：

が次にドラッグ動作上のスクロールを定義し、Iあなたのマウスがドラッグエリアを離れた場合、ページがトップに戻るスクロールすること

var curYPos = 0; 
var curDown = false; 

var scrollable = d3.select('#scrollable'); 
scrollable.on('mousemove', function() { 
    // Scroll only if mouse is down 
    if (curDown === true){ 
    // Scroll only along Y 
    // d3.mouse(this) is the position of the cursor inside your scrollable (this) 
    window.scrollTo(0, document.body.scrollTop + (curYPos - d3.mouse(this)[1])); 
    } 
}); 

scrollable.on('mousedown', function() { 
    curDown = true; 
    curYPos = d3.mouse(this)[1]; 
}); 
scrollable.on('mouseup mouseleave', function() { 
    curDown = false; 
}); 

Demo