如何使用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;
        }
}));

但是这段代码仍然使得平移非常滞后并且有一些峰值。

有没有更好的方法呢？顺便说一句，我使用角度。

Answer 1

我认为你要做的事情不需要d3。当然，您可以使用d3绑定事件，但拖动行为旨在将元素拖动到容器内，例如canvas或svg，这是静态的。

我发现这可能会起作用Codepen。

首先，我建议你将svg包装在一个具有拖动行为的div中，如果你查看它的源代码，它会做什么：

然后定义一个关于拖动行为的滚动，我已经调整了以前的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