javascript - D3.js force directed graph，通过使边缘相互排斥来减少边缘交叉

Question

所以我已经有一个页面绘制了一个力导向图，如图所示 here .

而且效果很好。我正在使用 here 中的 JS ，并进行一些调整以更好地分布节点。

这些或多或少是唯一的区别:

d3.json("force.json", function(json) {
  var force = d3.layout.force()
      .gravity(0.1)
      .charge(-2000)
      .linkDistance(1)
      .linkStrength(0.1)
      .nodes(json.nodes)
      .links(json.links)
      .size([w, h])
      .start();

降低链接强度似乎使链接更像 Spring ，因此它变得类似于 Fruchterman & Reingold经常使用的技术。这工作得相当好，但只适用于相当小的图。对于更大的图表，交叉点的数量只会增加——正如人们所期望的那样，但它所找到的解决方案通常远非最佳。我不是在寻找获得最佳解决方案的方法，我知道这非常困难。我只是希望它有一些粗略的添加，试图迫使线条和节点分开。

有没有办法在链接之间以及节点之间添加排斥力？我不熟悉 D3 力的工作方式，而且我似乎找不到任何东西那说这是可能的...

Answer 1

很遗憾，您的问题没有答案。

D3 中没有内置机制可以排斥边缘或最小化边缘交叉。您可能认为在边缘实现收费并不难，但我们做到了。

此外，似乎没有任何任何地方的机制可以总体上减少边缘交叉。我查看了数十个可视化库和布局算法，但没有一个涉及减少通用无向图上的边交叉。

有许多算法适用于平面图、2 级图或其他简化。 dagre理论上适用于 2 级图，尽管完全缺乏文档使得它几乎无法使用。

部分原因是图表布局困难。特别是，最小化边缘交叉是 NP-hard，所以我怀疑大多数布局设计师都遇到了这个问题，用头撞键盘几次，然后放弃。

如果有人为此想出了一个好的库，请为我们其他人发布它:)