我正在尝试使用 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
会这样,请帮我解决这个问题。
最佳答案
取自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 答案中找到关于为什么这样做的很好的解释。
关于javascript - D3 v5 变焦口吃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51652096/