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

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

限制指定区域内的气泡（实际SVG帧大小可以更大）

根据气泡因D3力模拟而占据的区域预先定义框架的大小（宽度/高度）。换句话说，确定将由力模拟计算的区域，然后定义SVG宽度/高度

---

有没有办法实现我提到的两个解决方案之一？是否有其他解决方案可防止力模拟气泡不接触SVG帧/边框？

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

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

以下代码是来自的片段：

函数tick（）{
节点
.attr（“cx”，函数（d）{返回d.x=Math.max（半径，Math.min（宽度-半径，
d、 x）；}）
.attr（“cy”，函数（d）{返回d.y=Math.max（半径，Math.min（高度-半径，
d、 y）；}）；
}

注意事项：

记住要考虑气泡的半径，以便它可以与边界相切

请注意，代码不仅返回限制值，还将其分配给d.x和d.y。这是必要的，因为模拟使用d.x和d.y的当前值来计算模拟的下一帧

---

这回答了你的问题吗？