节点的平移/拖动限制了查看端口

Question

我已经实现了平移，缩放和拖动在d3部队布局代码。他们工作得很好。但是，我注意到了一个问题:每当我平移或缩放时，节点都不会展开以完成视图。

你可能会得到更清晰的屏幕截图附上。

Answer 1

没有必要更改cx和cy属性的circle，因为它已经在节点group中。只需要transform节点group元素即可。还请注意，links的位置应该在nodes之后更新，因为links的位置是从节点位置计算出来的。

尝试替换您的tick函数，如下所示。

function tick(d) {
    node.attr("transform", function(d) {
        var radius = d.children ? 22 : isNaN(parseInt(d.name)) ? 16 : 10;
        d.x = Math.max(radius, Math.min(w - radius, d.x));
        d.y = Math.max(radius, Math.min(sh - radius, d.y));
        return "translate(" + d.x + "," + d.y + ")";
    });

    link.attr("x1", function(d) {
            return d.source.x;
        })
        .attr("y1", function(d) {
            return d.source.y;
        })
        .attr("x2", function(d) {
            return d.target.x;
        })
        .attr("y2", function(d) {
            return d.target.y;
        });
}

这是工作的JSFiddle