Question

我正在研究svg项目我使用d3.js来获得更好的ui，在我的图表中添加了缩放功能，但奇怪的是它的缩放功能在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 + ")");
}

并且我也希望阻止节点拖动的转换，因为节点和窗格同时拖动所以它看起来非常难看。这是我的fiddle

用于测试将左侧元素拖动到右侧div

Answer 1

你基本上就在那里。要使缩放行为起作用，请直接转换g下面的svg元素而不是svg本身 - 这些元素无效。要防止在SVG拖动时拖动节点，您可以使用已设置的nodedrag变量 - 只需将其设置为true上的dragstart和false上的dragend {{1}}。

完成jsfiddle here。

Answer 2

我知道这个特定问题已经得到回答，但由于这仍然是谷歌上的首要问题，我想为谷歌浏览器的更新 73 引入的最近的“功能”添加另一个答案，它破坏了我的缩放（和我花了 4 个小时从 v5 迁移到 v6 并调试了为什么缩放不起作用） https://developers.google.com/web/updates/2019/02/scrolling-intervention

我的解决方法是添加这一行：

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

D3缩放功能在Google Chrome中无效

2 个答案: