如何去除 d3js 中圆圈的重叠？答案

【问题标题】：How to remove the overlapping of circles in d3js?如何去除 d3js 中圆圈的重叠？
【发布时间】：2013-10-29 21:58:50
【问题描述】：

我正在尝试使用 d3.js 创建网络图

当我增加它重叠的圆的半径时。如何避免这些重叠。

我尝试使用碰撞功能，但没有达到预期效果

    force.nodes(json.nodes).links(links).charge(-500)
        .linkDistance(function (d) {
            if (d.target.bublesize == 12) {
                return 80;
            } else if (d.target.bublesize == 18) {
                return 90;
            } else {
                return link_distance;
            }
        }).collide(.5)

   force.start();

jsFiddle 和截图，可见重叠：

【问题讨论】：

强制布局不允许你这样做——你必须确保没有任何东西与你自己重叠。
@LarsKotthoff 我该怎么做。您的意思是减小圆圈的大小还是增加链接距离？
在这种情况下两者都可以提供帮助。但是，如果您真的想进行碰撞检测/预防，则必须自己实现。

标签： javascript d3.js collision-detection force-layout

【解决方案1】：

你看到了吗

Collision Detection example by Mike Bostock

它也适用于最新版本的 d3.js ...

【讨论】：