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

Question

我想你们中的许多人，与 D3.js 一起工作过，已经经历过同样的事情：如果你的网络或任何你采取的可移动元素被推得很紧，它们就会不断地飞出 svg 元素。如果我的网络太大，外部节点会消失，它们有点像“世界边缘的堕落”。

我很确定有一种方法可以使 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 + ")"; });

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

给定代码中的前两行和最后一行检查坐标是否超出框框。

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

玩得开心，戴夫

Answer 2

要使边界在力导向图中成为实心“墙”，您需要对边界框的边缘实施一些自定义碰撞检测。这是自定义碰撞检测的示例。

christopher 的方法适用于较小的图形，但对于比视口大得多的图形，它们将缩放到难以阅读的小尺寸。我上面给出的方法也将在小视口中的大图上失败，因为在某些时候无法解决冲突。

对于非常大的图表，我建议改为简单地允许用户平移和缩小。 这篇 SO 帖子提供了一些有关缩放的提示。您还需要创建一个rect与图形大小相同的对象作为接收鼠标事件的目标。tick您可以在事件处理程序中动态调整它的大小，例如，强制有向图的大小。

希望这些是一些有用的指针。

Answer 3

修复图形可视化远离您的一般方法是获取边界框，然后在 SVG 上创建一个转换，将边界框准确地映射到视口（将纵横比限制在某个模糊合理的值）。

如果用户放大，那么您就会忘记这个过程。

结果将是，如果“东西”飞走，您实际上会看到它缩小。用户可以随意缩放。

让它运作良好的关键是写下状态图。当某些事情触发重新计算时，您将进入“修复边界框”模式，并且当图形大部分停止移动时，您切换到“用户控制缩放”模式。使其正常工作意味着正确地在状态之间进行转换（始终为高级用户提供覆盖）。