Javascript 避免D3 force布局中节点和边之间的碰撞

在本例中：：

…Mike向我们展示了如何避免节点之间的碰撞，从而避免两个节点相互重叠

我想知道是否有可能避免节点和边之间的碰撞，这样就不会有节点“剪辑”或重叠边，除非它由该边连接

下面使用D3 force direct的示例显示，节点

L

与连接

I

和

A

的边重叠，类似地，节点

M

与连接

L

和

D

的边重叠。我们如何预防这种情况

---

如果图形中没有太多节点，则可以对其进行伪造。只需为每个链接插入一个或多个节点，并在

勾选处理程序中沿链接设置它们的位置。查看一个示例，但对Mike Bostock版本的更改基本上只是：

var linkNodes = [];

graph.links.forEach(function(link) {
  linkNodes.push({
    source: graph.nodes[link.source],
    target: graph.nodes[link.target]
  });
});

及

如果您有很多节点和边，这将带来相当严重的性能开销，但是如果您的图没有比示例大很多，则很难注意到

您可能还想摆弄真实节点相对于链接节点的相对力

再往前走一步，你就可以得到很好的曲线链接。
这在D3中的force layout实现中是不可能的。您需要自己实现这一点。请注意，这实际上是一个非常困难的问题（计算上），因此即使您有一个实现，它也可能不想在浏览器中运行。@Larskothoff，您是说，一般来说，没有已知的图形布局算法（包括为D3实现的算法）你能有效地解决这个问题吗？这取决于你对有效的定义。对我来说，找到一个（静态）解决方案至少是NP难的。这并不意味着在特定情况下可以很快地解决问题，但这在一般情况下是很困难的（对于大型图形，您可能无法很快地解决问题）。然后更改初始解决方案，使节点稍微移动（模拟会这样做），这将非常容易，因为您只需要进行局部修复。这不是一个困难的问题。只需将力添加到节点之外的边。如果可能的话，简单地增加图形的大小会有很大的帮助。@tba，你对边添加力的确切意思是什么？增加图形大小不是很灵活，因为可用于显示图形的区域可能会受到应用程序的限制。
// force.on('tick', function() {
linkNodes.forEach(function(node) {
  node.x = (node.source.x + node.target.x) * 0.5;
  node.y = (node.source.y + node.target.y) * 0.5;
});