我想很多与D3.js一起工作过的人已经经历过同样的事情：你的网络或你所采取的任何可移动元素如果被推到硬盘上，就会继续飞出svg-element。如果我的网络很大，外部节点就会消失，它们就会“落入世界的边缘”。
我非常害羞有一种方法可以使svg的边框成为一个坚固的“墙”，所以元素不能离开它并在空间中隐形飞行:)
你怎么处理这个问题？你是怎么解决的？
提前致谢， 大卫
我想很多与D3.js一起工作过的人已经经历过同样的事情：你的网络或你所采取的任何可移动元素如果被推到硬盘上，就会继续飞出svg-element。如果我的网络很大，外部节点就会消失，它们就会“落入世界的边缘”。
我非常害羞有一种方法可以使svg的边框成为一个坚固的“墙”，所以元素不能离开它并在空间中隐形飞行:)
你怎么处理这个问题？你是怎么解决的？
提前致谢， 大卫
最后，如果您在网络上找到合适的网站，那将非常简单。 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 + ")"; });
每当重要的事情发生时，就会调用它，“滴答” - 东西是在D3.js内部深处建立的东西，所以不要问我这个问题。 :)
给定代码中的前两行和最后一行检查坐标是否开箱即用。
希望这可以帮助那里的人比我做得更快;）
玩的很开心， 戴夫
最后，如果您在网络上找到合适的网站，那将非常简单。 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 + ")"; });
每当重要的事情发生时，就会调用它，“滴答” - 东西是在D3.js内部深处建立的东西，所以不要问我这个问题。 :)
给定代码中的前两行和最后一行检查坐标是否开箱即用。
希望这可以帮助那里的人比我做得更快;）
玩的很开心， 戴夫
要使边界成为力导向图中的实体“墙”，您需要为边界框的边缘实现一些自定义碰撞检测。 这是自定义碰撞检测的示例。
克里斯托弗的方法适用于小型图形，但对于比视口大得多的图形，它们将扩展到不可读的小尺寸。我在上面给出的方法也会在小视口中的大图上失败，因为碰撞在某些时候无法解决。
对于非常大的图形，我建议只需允许用户平移和缩小。 这篇SO帖子提供了一些关于缩放的提示。您还需要创建一个 rect 这是图表的大小，作为接收鼠标事件的目标。您可以动态调整大小，例如，强制定向图的大小 tick 事件处理程序
希望这些是一些有用的指针。
修复远离您的图形可视化的一般方法是获取边界框，然后在SVG上创建一个转换，将边界框精确地映射到视口上（保持纵横比被限制为一些模糊的合理值）。
如果用户放大，则会忘记此过程。
结果是，如果“东西”飞走了，你会有效地看到它缩小。并且用户可以根据需要进行缩放。
让这种方法运作良好的关键是写下状态图。当某些内容触发重新计算时，您将进入“修复边界框”模式，当图形大多停止移动时，您将切换到“用户控制缩放”模式。让它运行良好意味着在状态之间进行正确的转换（始终为高级用户提供覆盖）。