D3力布局可变排斥力

Question

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

是否可以在运行时根据节点大小更改排斥力？基本上我想＆＃34;鼓励＆＃34;布局没有重叠节点......

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是使用圆圈实现此技术的简单演示。