Javascript D3：将鼠标滚轮重新映射为平移手势而不是缩放手势

默认情况下，在D3中创建新的缩放行为时，它会将鼠标滚轮映射到控制缩放级别。如果图表大于图表区域，也可以单击并拖动以平移图表。我想重新映射鼠标滚轮手势，而不是在垂直轴上平移（鼠标滚轮向上平移，鼠标滚轮向下平移）。有人知道如何做到这一点吗？

好的，我们开始： 基于，我们可以为mousewheel事件指定事件处理程序。如中所示，我们首先将

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] + ")");
}

我们还需要量化两个方向的运动，并将其与鼠标滚轮的运动联系起来。通过检查
mouseweel
事件的详细信息，我们找到了两个有用的属性deltaX和deltaY，它们指示mouseweel在每个方向上移动的程度

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

最后的
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();
}

这是一个例子，也是修改迈克的

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

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

另外，Firefox中对
wheelDelta
的解释是相反的<代码>车轮三角洲

可通过

---

还可以在使用创建的函数中截取控制盘事件。默认情况下，滚轮滚动和鼠标拖动都会触发“缩放”事件，因此一种可能的策略是只等待缩放事件并在缩放功能中截取滚轮事件

例如，这里有一种使用滚轮滚动和鼠标拖动进行Y平移的方法：

var panYOnScrollAndDrag = d3.behavior.zoom()
   .scaleExtent([1, 1]) // prevents wheel events (or anything) from changing the scale
   .on("zoom", function() {
      if (d3.event.sourceEvent.type === "wheel") {
         // use the `d3.event.sourceEvent.deltaY` value to translate
         // e.g., yTranslation += yTranslationDelta;
      } else if (d3.event.sourceEvent.type === "mousemove") {
         // use the normal d3.event.translate array to translate
         // e.g., yTranslation = d3.event.translate[1];
      }
      container.attr("transform", "translate(0," + yTranslation + ")");
   });

---

然后，您可以将此函数扔到相关的d3容器中，就像这样，

selection.call（panyonscrollandddrag）

，所有逻辑都包含在该函数中。

您可以禁用/重新映射响应中概述的事件。感谢@larskothoff，这是非常有用的信息。我仍然需要关于如何准确编写我自己的处理程序的信息，该处理程序将覆盖南北，但这是一个很好的起点。我不知道如何处理crossWheelDelta（），在哪里使用该函数？