Javascript 防止d3js网络图中的节点重叠（v4）

在d3.js v4中是否有防止网络图节点重叠的方法

我尝试使用不同的力

charge

和

d3.forceManyBody（）

值，包括和不包括

distanceMax（）

，但它们仍然重叠。显然，将半径减小到8会提供更多的空间，但我需要足够大的节点来标记

这是d3区块：

我希望链接可以根据需要展开，这样节点就不会相互重叠。

您可以在模拟中添加一个节点以防止重叠。增加

迭代次数

应该会使它不那么紧张。另外，通过添加到

forceLink（）

，可以设置所需的链接距离，还可以使用，在节点之间创建更强的排斥

        let simulation = d3.forceSimulation()
                .force("link", d3.forceLink().id(function(d) { return d.id; }).distance(200))
                .force("charge", d3.forceManyBody().distanceMax(height/2).strength(-400))
                .force("collide", d3.forceCollide(radius).iterations(10))
                .force("center", d3.forceCenter(width/2, height/2));

---

这样就消除了重叠，很好！尽管节点现在紧紧围绕中心聚集。是否有一个属性可以将所有连接推离中心节点？我可以通过强制距离为200来实现这一点，但不知道是否有更好的方法？您也可以通过为

forceLink

使用

distance

设置器和/或为

forceManyBody

使用更负的强度来增加链接距离。我已经更新了我的答案来展示如何使用它