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

Question

来自 this question 我知道如何禁用鼠标滚轮放大 D3.js。如何将其重新映射为按住控制按钮和鼠标滚轮？谢谢

Answer 1

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

我的解决方案基于这个问题：How to temporarily disable the zooming in d3.js

我没有点击按钮 enable/disable 缩放，而是使用 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;
});

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

Answer 2

向缩放处理程序添加过滤功能 (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;
});

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

Changing zoom in D3.js from mousewheel to control+mousewheel

javascript

user-interface

zooming

d3.js