【问题标题】：I want to create a data-driven network, I'm trying to use d3我想创建一个数据驱动的网络，我正在尝试使用 d3
【发布时间】：2018-07-07 23:46:01
【问题描述】：
这个问题与避免项目在网络图中重叠有关。
在jsFiddle中：http://jsfiddle.net/fvila/fk8ata88/
var forceLayout = d3.layout.force()
.size([w, h])
.nodes(nodes)
.links(edges)
.linkDistance([200])
// avoid entanglement: most central nodes are most connected
.charge(function(d) {
return -200 + d.weight * -400
})
这行得通，但是我不明白：
- 为什么有些项目最终会重叠，当它们都有重负时
收费？
- 我怎样才能避免一开始的争吵？稍微动一动很好，但这太过分了。
【问题讨论】：
标签：
d3.js
diagram
force-layout
【解决方案1】：
这是因为您只使用算法为可视化输出的 x 坐标，并通过用硬编码的“级别”值覆盖它们来完全忽略 y 坐标。
这意味着该算法确实（大部分时间）产生了不重叠的结果，但是您的代码通过简单地以节点重叠的方式修改 y 坐标来引入重叠。
如果您用简单的d.y 替换yOut(d) 部分，您将看到实际（内部）结果并且节点不会重叠。但是你没有得到可视化的关卡。
这种产生分层布局（又名 Sugiyama 布局）的策略不是很聪明，而且总是会产生不好的结果，除非你非常非常幸运。
相反，您应该寻找可以正确处理这种情况的分层布局的实现。如果您需要坚持使用 d3，您可以尝试（几乎没有维护的 AFAIK）dagre layout。如果您想拥有更多功能并获得更好的结果，请查看hierarchic layout in yFiles for HTML。
披露：我为创造后者（商业）产品的公司工作，但我在这里不代表我的雇主。我绝对相信后一种实现是可用于 JavaScript 的布局算法的最佳可用实现。