2

我想要两个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，则很难准确定义会发生什么，但力会施加到某些圆圈而不是其他大多数圆圈，即使是相同的颜色也是如此。

任何想法这里发生了什么，或者如何解决它？

4

1 回答 1

1

D3 团队认为这种行为是一个错误（将力隔离到节点子集？#72），并修复了它。该修复程序包含在 d3-force 的 1.0.4 版本中，它作为 4.4.0 版本的完整 D3 构建的一部分提供。

使用“D3.js 中节点上的部分力”建议的解决方案解决了该问题，并且代码现在按预期工作。

于 2016-11-23T02:54:49.197 回答