我想你们中的很多人，使用过 D3.js，已经经历过同样的事情：如果你的网络或任何你采取的可移动元素被推得很紧，它们就会不断地飞出 svg 元素。如果我的网络太大，外部节点会消失，它们有点像“世界边缘的堕落”。
我很确定有一种方法可以使 svg 的边框成为坚固的“墙”，因此元素不能离开它并在空间中隐形飞行 :)
你对这个问题做了什么？你是怎么解决的？
提前致谢， 大卫
【问题讨论】：
标签： d3.js bounding-box
最后，如果您在网络上找到合适的网站，这很容易。 http://bl.ocks.org/1129492 完全符合我的要求 - 对象不能从 svg 中滑出。所以他只是在更新节点位置时添加了一些约束。 我的'tick'函数最终像
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 + ")"; });
每当可能发生重要事情时都会调用它，“tick”-事物是在 D3.js 深处构建的东西，所以不要问我这个问题。 :)
给定代码中的前两行和最后一行检查坐标是否超出框。
希望这可以帮助那里的人比我更快地完成工作；）
玩得开心， 戴夫
【讨论】：
要使边界成为力导向图中的实心“墙”，您需要对边界框的边缘实施一些自定义碰撞检测。 Here's an example of a custom collision detection.
christopher 的方法适用于较小的图形，但对于比视口大得多的图形，它们将缩放到难以阅读的小尺寸。我上面给出的方法也将在小视口中的大图上失败，因为在某些时候无法解决冲突。
对于非常大的图表，我建议改为简单地允许用户平移和缩小。 This SO post gives some tips about zooming。您还需要创建一个rect，它是您的图形大小作为接收鼠标事件的目标。您可以在 tick 事件处理程序中动态调整它的大小，例如，强制有向图的大小。
希望这些是一些有用的指针。
【讨论】：
解决图形可视化问题的一般方法是获取边界框，然后在 SVG 上创建一个转换，将边界框准确地映射到视口（将纵横比限制在某个模糊合理的值）。
如果用户放大，那么你就会忘记这个过程。
结果将是，如果“东西”飞走，您实际上会看到它缩小。并且用户可以随意缩放。
让这个工作顺利进行的关键是写下一个状态图。当某些事情触发重新计算时，您进入“修复边界框”模式，并且当图形大部分停止移动时，您切换到“用户控制缩放”模式。让它正常工作意味着正确地在状态之间进行转换（始终为高级用户提供覆盖）。
【讨论】：