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

【问题标题】：Changing zoom in D3.js from mousewheel to control+mousewheel将 D3.js 中的缩放从鼠标滚轮更改为控制+鼠标滚轮
【发布时间】：2016-04-20 07:33:45
【问题描述】：

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

【问题讨论】：

您需要修改 D3 源才能访问相关的事件处理程序。见github.com/mbostock/d3/blob/master/src/behavior/zoom.js

标签： javascript user-interface d3.js zooming

【解决方案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;
});

【讨论】：

有点作用。现在，当我按住 ctrl 进行缩放时，它非常敏感（缩放太多）
你必须调整wheelData。如果按下 ctrlKey，则会添加 10 倍的偏移量。 github.com/d3/d3-zoom/issues/204 github.com/d3/d3-zoom/commit/…

【解决方案2】：

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

我的解决方案基于这个问题：How to temporarily disable the zooming in 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/

【讨论】：

但是当你滚动时，比例值仍然会改变，但不会缩放。