在 Firefox 中显示“ReferenceError：事件未定义”的 D3 事件

Question

我在我的 d3 地图中使用鼠标滚轮缩放。正在使用以下代码。

.on("wheel.zoom", function() {
    var currScale = projection41039.scale();
    var newScale = currScale - 1 * event.deltaY;
    if (newScale >= 150) {
        var currTranslate = projection41039.translate();
        var coords = projection41039.invert([event.offsetX, event.offsetY]);
        projection41039.scale(newScale);
        var newPos = projection41039(coords);
        projection41039.translate([currTranslate[0] + (event.offsetX - newPos[0]),
            currTranslate[1] + (event.offsetY - newPos[1])
        ]);
        updateContents();
    }
})

这适用于 Chrome，但在 Firefox 中会引发错误：

ReferenceError: 事件未定义

Answer 1

这里的问题是 Chrome 遵循 Window.event 的 Internet Explorer 功能，而 Firefox 没有：

例如，给定一个按钮或任何其他元素，以下 sn-p 将适用于 Chrome，但不适用于 Firefox：

d3.select("button").on("click", function() {
  console.log(event)
})

在这里试试：https://jsfiddle.net/b9h4ntn0/（我通常使用 Stack Snippets，但在该特定示例中 sn-p 会冻结）

解决方案

使用d3.event。这样你就不用依赖Window.event:

d3.select("button").on("click", function() {
  console.log(d3.event)
})

以下代码适用于 Chrome 和 Firefox：https://jsfiddle.net/qj787zmj/