让 d3.forceCollide() 的两个实例一起玩得很好

Question

我想要d3.forceCollide() 的两个实例。一方面，每个节点都被推开以防止重叠。在第二种情况下，只有一部分节点被推开，半径更大。

为了完成第二个力量，我调整了初始化方法来过滤传入的节点，如下所示：

function selective(force,filter){
    var init = force.initialize;
    force.initialize = function(_){return init(_.filter(filter));};
    return force;
}

var dpi = 90;  // approximate pixels per inch in SVG
var size = dpi * (1/4); // quarter-inch unit size

var universally_applied = 
    d3.forceCollide()
    .radius(size)
    .strength(1);

var selectively_applied =
        selective(
            d3.forceCollide(),
            function(d){return d.id === color;}
        )
        .radius(size*5)
        .strength(1);
}

现在，这几乎可以工作了。我创建了一个小提琴来查看它的实际效果：https://jsfiddle.net/jarrowwx/0dax43ue/38/ - 每个彩色圆圈都应该从远处排斥所有其他相同颜色的圆圈。其他所有颜色，它都会碰到并推开它。

如果我不更改定义事物的顺序，则选择性施加的力仅应用于第一种颜色（红色）。如果我在施加力之前对data 数组进行洗牌，则很难准确定义会发生什么，但力会施加到某些圆圈而不是大多数其他圆圈，即使在相同颜色中也是如此。

有什么想法，或者如何解决它？

Answer 1

D3 团队认为此行为是一个错误 (Isolating forces to a subset of nodes? #72)，并对其进行了修复。该修复包含在 d3-force 的 1.0.4 版本中，该版本作为完整 D3 版本 4.4.0 版本的一部分提供。

使用"Partial forces on nodes in D3.js" 建议的解决方案解决了问题，代码现在按预期工作。