使用D3.js力时，如何防止气泡接触svg帧/边框？

Question

我正在使用D3.js库来开发一个气泡图。我从互联网上得到了一些样本，用力模拟来显示气泡节点。我非常喜欢它，并认为它包括在我的项目，但有一个问题，有时气泡被切割周围的SVG框架/边界。我试着理解和调试代码，并得出结论，气泡的最终位置是由力模拟决定的。我想到了以下两种解决方案：

1. 限制指定区域内的气泡(实际SVG帧大小可以更大)
2. 根据D3力模拟中气泡占据的区域预定义框架的大小(宽度/高度)。换句话说，确定要通过力模拟计算的区域，然后定义SVG的宽度/高度。

有什么方法可以实现我提到的2种解决方案之一？有没有其他解决方案来防止力模拟气泡不接触SVG框架/边界？

Answer 1

第二种方法是不可行的，因为力的模拟是非线性和不可预测的，无法预先确定其作用区域。此外，取决于所起作用的力量，节点可以无限期地排斥自己，因此在仿真期间扩展SVG可以创建一个不断扩展的SVG元素。

第一种方法就是要走的路。为了限制气泡，您可以编辑更新位置的函数(在示例中通常称为ticked() )，可以使用 Math.min() 和手动添加边界。

下面的代码是来自https://bl.ocks.org/mbostock/1129492的片段

function tick() {
    node
      .attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, 
          d.x)); })
      .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, 
          d.y)); });
  }

要注意的事情：

1. 记住要考虑气泡的半径，这样它才能与边界相切。
2. 注意，代码不仅返回有限的值，而且还将其赋值给d.x和d.y。这是必要的，因为仿真使用d.x和d.y的当前值来计算下一个模拟帧。