D3 Force Layout - 没有重叠的链接

Question

我使用force-layouts对节点进行D3可视化，如下所示。一些线相互交叉，这使得可视化更难以理解。如何确保线条不重叠？

我尝试修改力布局（电荷，摩擦力，重力）的参数，但没有任何运气。目前的代码如下。也许我需要做一些其他事情而不是修改force-layout来实现结果？

force = d3.layout.force()
              .nodes(data_nodes)
              .links(data_links)
              .charge(-3000)0
              .friction(0.6)
              .gravity(0.6)
              .size([width,height])
              .start();

Answer 1

正如Lars Kotthoff所述，它可以手动完成（我发现http://bl.ocks.org/mbostock/3231298#index.html作为灵感），但实际上如果我只是稍微更改了力布局，它可以做得更简单。

如果我让中心节点与其余节点相比具有相当强的电荷，它们将在节点周围很好地对齐，从而消除任何重叠：

.charge(function(d, i) { return i==0 ? -10000 : -500; })

Answer 2

您可以在边缘放置额外的节点以减少重叠。

例如：http://bl.ocks.org/couchand/7190660