Question

我一直在搞乱D3JS源代码。我想要实现的只是允许使用滚动进行缩放（就像谷歌地图一样），如果也按下了CTRL。我一直在搞乱完整的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：未定义事件[了解详情] d3.v4.js：16558：1 轮式的http://127.0.0.1:8887/d3.v4.js:16558:1 contextListener /＆LT;

如果你能帮助我，请提前感谢你！

Answer 1

正如我在my comment中解释的那样，您不需要弄乱源代码，只需将条件添加到代码中即可。在your reply中，您说它不适用于Firefox。

嗯，这是Firefox的预期行为（见my answer here）。

因此，而不是：

if (event.ctrlKey == false) return;

你应该这样做：

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

这适用于Chrome和Firefox。

以下是带有此更改的bl.ocks：http://blockbuilder.org/anonymous/2a1c5fe3ed6948665f8d946a753adaef

Answer 2

添加了这一行：

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

进入d3.v4.js的源代码：

  function wheeled() {

在它之后的第二行。现在它有效。感谢您的建议，毕竟它有所帮助：）

Answer 3

我偶然发现了相同的问题，但不想更改d3源文件。然后，我仅通过有条件地调用原始车轮处理程序（使用D3v4）解决了该问题：

this.zoom = d3.zoom()[...]

var svg = d3.select(this.$refs.chart)
             .call(this.zoom);

var wheeled = svg.on("wheel.zoom");

svg
    .on("wheel.zoom", function () {
        if (d3.event.ctrlKey) {
            wheeled.call(this);
            // prevent browser zooming at minimum zoom
            d3.event.preventDefault();
            d3.event.stopImmediatePropagation();
        }
    });

Answer 4

使用过滤器要求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() })

仅在Ctrl +滚动

4 个答案: