Javascript D3V5变焦口吃

我正在尝试使用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小提琴：

以下是我面临的问题。（代码请参考上面的JS Fiddle）

• 除非在节点、文本标签或链接上进行缩放或平移，否则无法在树上进行缩放或平移，因此无法在父对象

  g

  上进行缩放
• 当我试图通过在节点、文本标签或链接上单击和拖动来平移时，会出现口吃
• 当我缩小尝试平移时，树就会消失，这意味着有太多的平移

如果您知道为什么d3.zoom会出现这种情况，请帮助我找到解决方案。

摘自并适应此问题：

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答案中找到