javascript - D3 v5 变焦口吃

Question

我正在尝试使用 d3.zoom，但我遇到了一些问题。下面是我正在使用的简单代码。

var treeGroup = d3.select('.treeGroup');  //parent g element
treeGroup.call(d3.zoom().on('zoom', function() {
    console.log(d3.event.transform);
    treeGroup.attr('transform', d3.event.transform);
}));

JS fiddle :https://jsfiddle.net/nohe76yd/9/

以下是我面临的问题。 (代码请引用上面的JS Fiddle)

• 我无法缩放或平移树，除非我在节点、文本标签或链接上执行此操作，因此我无法缩放父 g 对象。
• 当我尝试通过单击并拖动节点、文本标签或链接进行平移时出现卡顿
• 当我缩小尝试平移时，树消失意味着翻译太多。

如果您知道为什么 d3.zoom 会这样，请帮我解决这个问题。

Answer 1

取自https://stackoverflow.com/a/20072986/6060606并适应了这个问题:

var rootSVG = d3.select('.rootSVG');
var treeGroup = d3.select('.treeGroup');
rootSVG.call(d3.zoom().on('zoom', function() {
    treeGroup.attr('transform', d3.event.transform);
}));

这修复了抖动并使整个 SVG “可拖动”。可以在链接的 SO 答案中找到关于为什么这样做的很好的解释。