如何使用d3滾動整個頁面

Question

我希望我的d3能夠在滾動時滾動整個頁面。

有點像effect on challonge，但只在y軸上。

這是我的嘗試。

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，我正在使用angular。

Answer 1

我認爲你要做的事不需要d3。當然，你可以用d3綁定事件，但拖拽行爲被設計爲拖拽容器，如canvas或svg，這是靜態的。

我發現這個Codepen可能做的工作。

首先，我勸你還是SVG包你在一個div，將有拖拽的行爲，什麼Challonge做，如果你看看它的源代碼：

然後定義上拖拽行爲滾動，我已經適應了以前codepen使用D3：

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