D3 力布局可变排斥力

Question

我正在研究具有可变大小节点的图表：http://gordonsmith.github.io/Visualization/ （按 F2 开始强制布局）

是否可以在运行时根据节点大小改变排斥力？基本上我想“鼓励”布局不要有重叠的节点......

Answer 1

力布局允许您将一个函数传递给force.charge()，它可以让您指定每个节点的电荷强度，并将节点及其索引作为参数传递。

如果您要以这样一种方式创建 nodes 数据，即每个元素都有一个可访问的属性来表示其大小（例如边界圆的半径），那么您可以使用此数据来设置相对电荷值.

例如，如果数据中的每个元素都有一个属性 r 表示其半径，则可以执行以下操作：

var force = d3.layout.force()
  .nodes(nodes)
  .size([width,height])
  .charge(function(d) {
    return -5 * d.r;
  })
  .on('tick', tick)
  .start();

-5 因子的选择完全是任意的，您必须选择一个适合您的数据的值。正值表示吸引，负值表示排斥。

HERE 是一个使用圆圈的简单演示。