d3.behavior.zoom 拖拽时抖动、晃动、跳跃和弹跳答案

【问题标题】：d3.behavior.zoom jitters, shakes, jumps, and bounces when draggingd3.behavior.zoom 拖拽时抖动、晃动、跳跃和弹跳
【发布时间】：2012-06-11 22:38:11
【问题描述】：

我正在使用 d3.behavior.zoom 在树形布局上实现平移和缩放，但它表现出一种我将其描述为弹跳或数值不稳定的行为。当您开始拖动时，显示会莫名其妙地跳来跳去，直到它消失。代码如下所示：

var svg = target.append ("g");
...
svg.call (d3.behavior.zoom()
    .translate ([0, 0])
    .scale (1.0)
    .scaleExtent([0.5, 2.0])
    .on("zoom", function() {
        svg.attr("transform","translate(" + d3.event.translate[0] + "," +  d3.event.translate[1] + ") scale(" +  d3.event.scale + ")");
    })
);

有没有更好的方法来设置不会造成这种干扰的转换？

【问题讨论】：

标签： d3.js

【解决方案1】：

仔细观察后，不稳定性来自 svg 元素在移动过程中应用于鼠标位置的变换。我最终得到的解决方案是在具有缩放行为的元素和专门接收缩放/平移转换的元素内容之间插入另一个“g”元素：

var svg = target.append ("g");
var child = svg.append ("g");
...
svg.call (d3.behavior.zoom()
    .translate ([0, 0])
    .scale (1.0)
    .scaleExtent([0.5, 2.0])
    .on("zoom", function() {
        child.attr("transform","translate(" + d3.event.translate[0] + "," +  d3.event.translate[1] + ") scale(" +  d3.event.scale + ")");
    })
);
...
child.append("line")...

【讨论】：

谢谢！我遇到了同样的麻烦。这有帮助。
你的明星！我以为这需要深入手动阅读才能解决，但你的回答意味着我今天掉的头发少了一点！
出色的解决方案。价值100万美元！为我解决一个大问题。
谢谢，虽然我没有马上弄清楚，但它确实有效 - 只是要明确一点：您不应该将缩放监听器附加到要转换的对象上。

【解决方案2】：

此答案是 @Bretton Wade 使用 D3.js v4 的答案的调整版本。

    var svg = target.append ("g");
    var child = svg.append ("g");
    ...
    svg.call (d3.zoom()
        .on("zoom", function() {
            child.attr("transform", d3.event.transform);
        })
    );
    ...
    child.append("line")...

【讨论】：