将 D3.js 中的缩放从鼠标滚轮更改为控制+鼠标滚轮

Question

从这个问题我知道如何在 D3.js 中禁用鼠标滚轮缩放。如何将其重新映射为按住控制按钮和鼠标滚轮？谢谢。

Answer 1

将过滤器功能添加到缩放处理程序 ( https://github.com/d3/d3-zoom#zoom_filter )。

在d3.event元素ctrlKey( https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ctrlKey ) 中指示是否按下了控制键。

false在过滤器函数中返回会忽略该事件。

zoom.filter(function () {
    return d3.event.ctrlKey;
});

Answer 2

我找到了一个不需要修改D3.js源码的解决方案。

我的解决方案基于这个问题：如何暂时禁用 d3.js 中的缩放

我没有使用单击按钮来启用/禁用缩放，而是使用了 keydown/keyup 事件：

svg.call(zoom = d3.behavior.zoom().on('zoom', redrawOnZoom)).on('dblclick.zoom', null);

var zooming = false;

function redrawOnZoom() {
  if (zooming) {
    svgContainer.attr('transform', 'translate(' + zoom.translate() + ')' + ' scale(' + zoom.scale() + ')');
  }
};

d3.select("body").on("keydown", function () {
    zooming = d3.event.ctrlKey;
});

d3.select("body").on("keyup", function () {
     zooming = false;
});

这是一个完整的小提琴：https ://jsfiddle.net/tabacof/dcbor8eL/3/