放大树布局保留根节点位置答案

【问题标题】：Zoom on tree layout preserve root node location放大树布局保留根节点位置
【发布时间】：2014-01-05 22:23:29
【问题描述】：

我是 d3 的新手，在树形布局上缩放和拖动时遇到问题。

编辑：使用来自 cmets 的信息更新了 JSFiddle

我创建了一个示例，JSFiddle here。

我的问题在于缩放功能：

function zoom() {
        var scale = d3.event.scale,
            translation = d3.event.translate,
            tbound = -height * scale * 100,
            bbound = height * scale,
            lbound = (-width + margin.right) * scale,
            rbound = (width - margin.bottom) * scale;
        console.log("pre min/max" + translation);
        // limit translation to thresholds
        translation = [
        Math.max(Math.min(translation[0], rbound), lbound),
        Math.max(Math.min(translation[1], bbound), tbound)];
        console.log("scale" + scale);
        console.log("translation" + translation);
        d3.select("g")
            .attr("transform", "translate(" + translation + ")" +
            " scale(" + scale + ")");
    }

如果展开和折叠节点然后尝试拖动，根节点总是回到左上角。我添加了一些日志记录，显示在这种情况下 translation 的值为 -1,-1

有没有办法可以保留当前根节点的位置？

【问题讨论】：

对此有很多问题，例如here 和 here。请问这些能解决你的问题吗？
谢谢。我实际上使用了this answer 并将缩放功能移到了更新之外，但是第一次移动树时，我仍然遇到问题。知道为什么吗？（更新的 JSFiddle 有问题）

标签： d3.js zooming

【解决方案1】：

问题是您使用缩放行为翻译的g 元素是用非零翻译初始化的。缩放行为没有意识到这一点，导致您看到“跳跃”。要解决此问题，请使用该翻译初始化缩放行为。

var zb = d3.behavior.zoom().scaleExtent([0.5, 5]).on("zoom", function () {
        zoom();
    });
zb.translate([margin.left, margin.top]);

完整示例here。

【讨论】：

非常感谢您的帮助。很有道理。