D3 v5变焦口吃 | v5变焦口吃

本文介绍了D3 v5变焦口吃的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I am trying to use d3.zoom but there are some issues that I am facing. Below is the simple code that I am using.

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以获得代码)

Below are the issues that I am facing. (Please refer above JS Fiddle for code)

除非在节点，文本标签或链接上执行，否则无法缩放或平移树，因此无法缩放父级g对象.
当我尝试通过单击并拖动节点，文本标签或链接进行平移时会出现结结巴巴的情况
当我缩小尝试平移而不是树木消失时，表示平移太多.

I can not zoom or pan on tree unless I do it on nodes, text labels or links hence I can not zoom on parent g object.
There is a stutter when I try to pan by clicking and dragging on nodes, text labels or links
When I zoom out an try to pan than tree disappears means there is too much translate.

如果您知道为什么d3.zoom如此运行，请为我提供解决方案.

If you have any idea why d3.zoom is behaving like this, please help me with the solution.

推荐答案

来自 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答案中找到有关为何有效的出色解释.

This fixes the jitter and makes the entire SVG "draggable". The excellent explanation as to why this works can be found in the linked SO answer.

这篇关于D3 v5变焦口吃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！