避免D3力布局中节点和边缘之间的碰撞

Question

在此示例中：http://bl.ocks.org/mbostock/1747543：

...... Mike向我们展示了如何避免节点之间的冲突，以便没有两个节点相互重叠。

我想知道是否可以避免节点和边缘之间的冲突，以便没有节点“剪辑”。或重叠边缘，除非它是由边缘连接的。

使用D3 force-direct的以下示例显示节点L与连接I和A的边重叠，类似地，节点M与边连接重叠L和D。我们如何防止此类情况？

Answer 1

如果您的图表没有太多节点，您可以伪造它。只需为每个链接插入一个或多个节点，然后在tick处理程序中的链接上设置它们的位置。查看http://bl.ocks.org/couchand/7190660的示例，但对Mike Bostock版本的更改基本上只是：

var linkNodes = [];

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

和

// 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;
});

如果你有很多节点和边缘，这会引入相当严重的性能开销，但是如果你的图形没有比你的例子大得多，那么很难被注意到。

您可能还希望摆弄真实节点与链接节点的相对力量。

更进一步，你可以获得http://bl.ocks.org/mbostock/4600693的漂亮曲线链接。