javascript - 避免 D3 强制布局中节点和边之间的碰撞

Question

在这个例子中：http ://bl.ocks.org/mbostock/1747543 ：

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

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

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

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的漂亮弯曲链接。