D3缩放功能在Google Chrome中无效

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 + ")");
}

而且我想阻止节点拖动的转换,因为节点和窗格同时拖动,所以它看起来非常难看.这是我的小提琴

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

Answer 1

你基本上就在那里。要使缩放行为发挥作用，请g直接转换位于 下方的元素svg而不是其svg本身 - 这没有任何效果。为了防止在 SVG 拖动时拖动节点，您可以使用nodedrag已经设置的变量 - 只需将其设置为trueondragstart和falseon dragend。

在这里完成 jsfiddle 。