javascript - D3 可折叠树 - 缩放时跳动

Question

我已经花了太多时间试图解决这个问题。我的目标是创建 d3 可折叠树，但由于某种原因，当您缩放它时，它会将树移动到位置 0,0。我已经看到一些类似问题的问题，例如这个 d3.behavior.zoom jitters, shakes, jumps, and bounces when dragging但无法弄清楚如何将其应用于我的情况。

我认为这部分有问题，但我不确定如何更改它以具有适当的缩放功能。

d3.select('g').transition()
    .duration(duration)
    .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")")
zoomListener.scale(scale);

这是我的代码:https://jsfiddle.net/ramo2600/y79r5dyk/11/

Answer 1

您正在将可缩放 g 翻译到位置 [100,100] 但没有告诉缩放 d3.behavior.zoom() 关于它。所以它从 [0,0] 开始，你会看到“跳跃”。

将您的 centerNode 函数修改为:

function centerNode(source) {
    scale = zoomListener.scale();
    // x = -source.y0;
    y = -source.x0;
    // x = x * scale + viewerWidth / 2;
    x = 100;
    y = 100;
    // y = y * scale + viewerHeight / 2;
    d3.select('g').transition()
        .duration(duration)
        .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")")
    zoomListener.scale(scale);
    zoomListener.translate([x,y]); //<-- tell zoom about position
}