Jquery D3缩放功能在Google chrome中不起作用

我正在做svg项目，为了更好的用户界面，我使用了d3.js，在我的图表中添加了缩放功能，但奇怪的是，它的缩放功能在Google chrome中不起作用

svg.call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom));

function zoom() {
    svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

我还想防止节点拖动时平移，因为节点和窗格同时拖动，所以看起来非常难看。 这是我的

---

对于测试，将left元素拖动到right div

基本上就是这样。要使缩放行为正常工作，请直接在

svg

下变换

g

元素，而不是

svg

本身，这样做没有效果。为了防止在SVG拖动上拖动节点，可以使用已经设置好的

nodedrag

变量——只需在

dragstart

上将其设置为

true

，在

dragend

上设置为

false

---

完整的JSFIDLE。

我知道这个特定的问题已经得到了回答，但这仍然是谷歌的首要问题，我想为谷歌Chrome更新73引入的最新“功能”添加另一个答案，它打破了我的zoom（我从v5迁移到v6花了4个小时，调试zoom为什么不工作）

我的解决办法是添加以下行：

window.addEventListener("wheel", ()=> {passive: false});