D3.js d3.behavior.zoom拖动时抖动、抖动、跳跃和反弹

我使用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 + ")");
    })
);

---

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

仔细观察后，不稳定性来自移动过程中应用于鼠标位置的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")...

---

这个答案是@Bretton Wade使用

D3.js

v4的答案的一个调整版本

var svg=target.append（“g”）；
var child=svg.append（“g”）；
...
svg.call（d3.zoom（）
.on（“缩放”，函数（）{
attr（“transform”，d3.event.transform）；
})
);
...
附加（“行”）。。。

谢谢！我也有同样的问题。这很有帮助，你是明星！我以为这需要深入阅读手册才能解决，但你的回答意味着我今天少掉一点头发！绝妙的解决方案。它值一百万美元！帮我解决了一个大问题。谢谢，虽然我没有马上弄明白，但还是成功了——只是想说清楚：你不应该在你想要变换的对象上附加缩放侦听器。