d3.js - D3.js 中的边界框

Question

我认为很多使用 D3.js 的人已经经历过同样的事情:如果你的网络或你采取的任何可移动元素被推到硬，它们就会从 svg-element 中飞出。如果我的网络太大，外部节点就会消失，它们有点像“世界边缘的陨落”。

我很确定有一种方法可以使 svg 的边界成为坚固的“墙”，因此元素不能离开它并在空间中隐形飞行:)

你对这个问题做了什么？你是怎么解决的？

提前致谢，
大卫

Answer 1

最后，如果您在网络上找到了合适的网站，那就很容易了。
http://bl.ocks.org/1129492正是我想要的 - 对象不能从 svg 中滑出。所以他只是在更新节点位置时添加了一些约束。
我的“滴答”功能最终就像

node.attr("cx", function(d) { return d.x = Math.max(15, Math.min(width - 15, d.x)); })
    .attr("cy", function(d) { return d.y = Math.max(15, Math.min(height - 15, 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; });

node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

每当发生重要的事情时都会调用它，“滴答”-东西是在 D3.js 深处构建的东西，所以不要问我这个。 :)

给定代码中的前两行和最后一行检查坐标是否开箱即用。

希望这可以帮助那里的人比我更快地完成工作；)

过得好，
戴夫