默认情况下,当您在D3中创建新的缩放行为时,它将鼠标滚轮映射到控制缩放级别。如果图表大于图表区域,您也可以单击并拖动以平移图表。我想重新映射鼠标滚轮手势,以使其在垂直轴上平移(鼠标滚轮向上平移,鼠标滚轮向下平移)。任何人有任何线索如何做到这一点?

最佳答案

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

selection.call(zoomer)
      .on("wheel.zoom",pan) // handler function for mousewheel zoom
其次,我们需要定义平移手势,该手势基本上是x和/或y方向上的translate
function pan() {
  svg.attr("transform", "translate(" + [dx,dy] + ")");
}
我们还需要量化两个方向的运动,并将其与鼠标滚轮运动联系起来。通过检查MouseWheel事件的详细信息,我们找到两个有用的属性deltaX和deltaY,它们指示鼠标滚轮在每个方向上移动了多少。
最终的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 fiddlebl.ock,它们也修改了Mike的geometric zoom example
跨浏览器支持:
似乎浏览器之间的鼠标滚轮事件有所不同。对于Safari和Firefox支持,您需要添加以下内容:
selection.call(zoomer)
  .on("wheel.zoom",pan)
  .on("mousewheel.zoom", pan)
  .on("DOMMouseScroll.zoom", pan)
同样,在Firefox中wheelDelta的解释也相反。 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)));
}

10-08 15:46