D3 可折叠树 - 缩放时跳跃

【问题标题】：D3 collapsible tree - jumpy on zoomD3 可折叠树 - 缩放时跳跃
【发布时间】：2017-03-26 19:40:37
【问题描述】：

我已经花了太多时间试图弄清楚这一点。我的目标是创建 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/

【问题讨论】：

标签： javascript d3.js

【解决方案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
}

【讨论】：