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

Question

是否有一种方法可以防止网络图节点在d3.js v4中重叠？

我尝试对带有和不带有charge的力d3.forceManyBody()和distanceMax()使用不同的值，但是它们仍然重叠。显然，将半径减小到8可以提供更多空间，但是我需要足够大的节点来标记。

这是d3块：

https://bl.ocks.org/Ognami/9dd4111eb793eec1645e9cdc7d4ba5b0

Id表示链接可以根据需要扩展，因此节点之间不会重叠。

Answer 1

您可以在模拟中添加d3.forceCollide以防止重叠。增加iterations可以减少抖动。同样，通过将distance添加到forceLink()，您可以设置所需的链接距离，并且还可以使用manyBody.strength()在节点之间创建更强的排斥力。

        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));