javascript - D3 : remap mousewheel to be panning gesture instead of zoom gesture

Question

默认情况下，当您在 D3 中创建新的缩放行为时，它会映射鼠标滚轮来控制缩放级别。如果图表大于图表区域，您还可以单击并拖动来平移图表。我想重新映射鼠标滚轮手势以在垂直轴上平移(鼠标滚轮向上平移，鼠标滚轮向下平移)。有人知道如何实现这一目标吗？

Answer 1

好的，我们开始吧:基于Lars' comment ，我们可以为鼠标滚轮事件指定事件处理程序。如answer所示，我们首先将 wheel.zoom 事件映射到自定义处理程序 pan

selection.call(zoomer)
      .on("wheel.zoom",pan) // handler function for mousewheel zoom

其次，我们需要定义平移手势，它基本上是在 x 和/或 y 方向上的平移。

function pan() {
  svg.attr("transform", "translate(" + [dx,dy] + ")");
}

我们还需要量化两个方向的移动，并将其与鼠标滚轮移动相关联。通过检查MouseWheel事件的详细信息，我们发现两个有用的属性deltaX和deltaY，指示鼠标滚轮在每个方向上移动了多少。 p>

最终的pan函数如下

function pan() {
    current_translate = d3.transform(svg.attr("transform")).translate;
    dx = d3.event.wheelDeltaX + current_translate[0];
    dy = d3.event.wheelDeltaY + current_translate[1];
    
  svg.attr("transform", "translate(" + [dx,dy] + ")");
  d3.event.stopPropagation();
}

这是一个working fiddle和 bl.ock还修改迈克的 geometric zoom example .

跨浏览器支持:

浏览器之间的鼠标滚轮事件似乎有所不同。对于 Safari 和 Firefox 支持，您需要添加以下内容:

selection.call(zoomer)
  .on("wheel.zoom",pan) 
  .on("mousewheel.zoom", pan)
  .on("DOMMouseScroll.zoom", pan)

此外，wheelDelta 的解释在 Firefox 中是相反的。 wheelDelta 可以通过 this function 修复

function crossWheelDelta()
  // cross-browser wheel delta
  var e = window.event || e; // old IE support
  return Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
}