D3.js 树布局上的缩放保留根节点位置

我是d3新手，在缩放和拖动树布局时遇到了麻烦

编辑：使用评论中的信息更新JSFIDLE

我创建了一个示例JSFIDLE

我的问题在于缩放功能：

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

---

有什么方法可以保留当前根节点的位置吗？

问题是，使用缩放行为转换的

g

元素使用非零转换进行初始化。缩放行为没有意识到这一点，导致您看到的“跳跃”。要修复此问题，请使用该转换初始化缩放行为

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

---

完整示例。

这方面有许多问题，例如和。你能看看这些是否能解决你的问题吗？谢谢。实际上，我使用了缩放功能并将其移动到了更新之外，但在我第一次移动树时，我仍然存在这个问题。知道为什么吗？（问题中更新的JSFIDLE）非常感谢您的帮助。这很有道理。