jquery – D3缩放功能在Google Chrome中无效

我正在研究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

最佳答案

你基本上就在那里.要使缩放行为起作用,请直接在svg下面转换g元素而不是svg本身 – 这没有任何效果.要防止在SVG拖动上拖动节点,可以使用已经设置的nodedrag变量 – 只需在dragstart上将其设置为true,在dragend上将其设置为false.

完成jsfiddle here.