我有一个 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();

最佳答案

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

如果我让中央节点与其余节点相比具有相当强的电荷,它们将很好地排列在节点周围的圆圈中,消除任何重叠:
.charge(function(d, i) { return i==0 ? -10000 : -500; })

关于javascript - D3 力布局 - 无重叠链接,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29160907/

10-17 02:20