D3 Force Layout - 没有重叠的链接

pir*_*pir 1 javascript data-visualization d3.js force-layout

我使用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();
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

pir*_*pir 6

正如Lars Kotthoff所述,它可以手动完成(我发现http://bl.ocks.org/mbostock/3231298#index.html作为灵感),但实际上如果我改变了力布局,它可以做得更简单一些一点点.

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

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