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小提琴：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答案中找到有关为何有效的出色解释。

D3 v5变焦口吃

1 个答案: