D3 强制布局 - 无重叠链接答案

【问题标题】：D3 Force Layout - No overlapping linksD3 强制布局 - 无重叠链接
【发布时间】：2015-05-23 12:43:54
【问题描述】：

我有一个使用强制布局的节点的 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();

【问题讨论】：

你不能。 D3 中实现的力布局甚至不考虑链接是否重叠。
我可以用其他方式吗？喜欢找到重叠的链接并相应地移动节点？还是这会影响部队布局？
你当然可以自己做，但这并不简单。

标签： javascript d3.js data-visualization force-layout

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

正如 Lars Kotthoff 所说，它可以手动完成（我发现 http://bl.ocks.org/mbostock/3231298#index.html 作为灵感），但实际上，如果我稍微改变一下 force-layout，它可以做得更简单。

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

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

【讨论】：