Question

我认为很多与D3.js一起工作过的人已经经历过同样的事情：你的网络或你所采取的任何可移动元素如果被推到硬盘上，就会继续飞出svg-element。如果我的网络很大，外部节点就会消失，它们就会“落入世界的边缘”。

我非常害羞有一种方法可以使svg的边框成为一个坚固的“墙”，因此元素不能离开它并在空间中看不见：）

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

提前致谢，大卫

Answer 1

最后，如果您在网络上找到合适的网站，那将非常简单。 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深处建立的东西，所以不要问我这个问题。：）

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

希望这可以帮助那些人比我更快地完成工作;）

玩得开心，戴夫

Answer 2

要在力导向图中使边界成为实心“墙”，您需要对边界框的边缘实施一些自定义碰撞检测。 Here's an example of a custom collision detection

克里斯托弗的方法适用于小图，但对于比视口大得多的图，它们将扩展到不可读的小尺寸。我在上面给出的方法也会在小视口中的大图上失败，因为碰撞在某些时候无法解决。

对于非常大的图形，我建议只需让用户平移和缩小。 This SO post gives some tips about zooming。您还需要创建一个rect，它是图形的大小，作为接收鼠标事件的目标。您可以在tick事件处理程序中动态调整大小，例如强制有向图。

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

Answer 3

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

如果用户放大，则会忘记此过程。

结果将是，如果“东西”飞走了，你会有效地看到它缩小。用户可以根据需要进行缩放。

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

D3.js中的包围框

3 个答案: