D3 v5 Zoom Stutter

Question

我正在尝试使用d3.zoom但我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小提琴： 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答案中找到。