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
}

更新fiddle。

D3可折叠树 - 变焦时跳跃

1 个答案: