Question

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

有没有更好的方法来设置不会导致此类干扰的转换？

Answer 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")...

Answer 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")...

d3.behavior.zoom拖动时会抖动，抖动，跳跃和反弹

2 个答案: