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

我知道如何在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;
});

---

下面是一个完整的小程序：

向缩放处理程序（）添加一个过滤函数

在

d3.event

中，元素

ctrlKey

（）指示是否按下了控制键

在filter函数中返回

false

，将忽略该事件

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

---

您需要修改D3源以访问相关事件处理程序。请参见，但当您滚动时缩放值仍会更改，但不进行缩放。效果会有所不同。现在，当我按住ctrl键进行缩放时，它非常敏感（缩放太多），您必须调整数据。如果按下ctrlKey，则会增加10倍的偏移量。