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

Question

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

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

我想知道是否有可能避免节点和边缘之间的冲突,以便没有节点"剪辑"或重叠边缘,除非它由该边连接.

使用D3力直接示出了下面的示例该节点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的漂亮曲线链接.