开发者问题收集

仅当按下 Ctrl 键并滚动时才缩放

2018-01-19
1827
javascript html d3.js dom-events

我一直在弄乱 D3JS 源代码。我想要实现的是，如果同时按下 CTRL，则仅允许使用滚动进行缩放（就像 Google 地图一样）。我一直在弄乱完整的 D3： https://d3js.org/d3.v4.js

我试图在第 16556 行左右实现这一点： 

  function wheeled() {
    if (!filter.apply(this, arguments)) return;
    if (event.ctrlKey == false) return;    //This is the new line I added
    .....
    //else if ((t.k === k)) return;        //I commented out this line

其他一切都完好无损。我下载了这个，并且一直在使用这个示例： https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

在 Chrome 中，它运行完美。一切都按预期运行，但是当我尝试在 Firefox 中按 Ctrl+Scroll 时，它只会缩放整个页面。Firefox 说： 

ReferenceError: event is not defined[Learn More] d3.v4.js:16558:1
    wheeled http://127.0.0.1:8887/d3.v4.js:16558:1
    contextListener/<
3个回答

我偶然发现了同样的问题，但不想更改D3源文件。然后，我仅通过有条件地调用原始轮处理程序（我正在使用D3V4）来解决它：

971896176
Gnietschow
2018-12-07

正如我在 我的评论 中所解释的那样，您无需弄乱源代码，只需将条件添加到您的代码中即可。在 您的回复 中，您说它在 Firefox 上不起作用。

好吧，这是 Firefox 的预期行为（请参阅 我的回答 ）。

因此，而不是： 

if (event.ctrlKey == false) return;

您应该这样做： 

if (d3.event.sourceEvent.ctrlKey == false) return;

这将适用于 Chrome 和 Firefox。

这是包含该更改的块： http://blockbuilder.org/anonymous/2a1c5fe3ed6948665f8d946a753adaef

Gerardo Furtado
2018-01-19

使用过滤器要求 ctrlKey 启动缩放事件。按下 ctrlKey 时禁用滚动，以防止滚动超过缩放范围时浏览器的默认操作。这两件事都在缩放文档中有所提示。 

// ignore right button and require ctrl
zoom.filter(() => !d3.event.button && d3.event.ctrlKey)

// ignore default browser action when ctrlKey is pressed
selection
  .call(zoom)
  .on("wheel", () => { if (d3.event.ctrlKey) d3.event.preventDefault() })
nitely
2018-12-23