D3.js 力

D3 的力布局使用基于物理的模拟器来定位视觉元素。可以在元素之间设置力，例如：1.所有元素都可以配置为相互排斥;2.元素可以被吸引到重心;3.链接的元素可以设置为固定距离（例如用于网络可视化）;4.元素可以配置为避免相互交叉（碰撞检测）

力布局比其他 D3 布局需要更多的计算量（通常需要几秒钟的时间），并且解决方案是以逐步（迭代）的方式计算的。通常 SVG/HTML 元素的位置会随着模拟的迭代而更新，这就是为什么我们看到圆圈挤在一起的原因。

• 设置力模拟：

设置力模拟有 4 个步骤：

1. 创建对象数组
2. 调用forceSimulation，传入对象数组
3. 向系统添加一个或多个力函数（例如forceManyBody, forceCenter, forceCollide）
4. 设置回调函数以在每个刻度后更新元素位置

var width = 300, height = 300
var nodes = [{}, {}, {}, {}, {}]

var simulation = d3.forceSimulation(nodes)
  .force('charge', d3.forceManyBody())
  .force('center', d3.forceCenter(width / 2, height / 2))
  .on('tick', ticked);
  
function ticked() {
  var u = d3.select('svg')
    .selectAll('circle')
    .data(nodes)
    .join('circle')
    .attr('r', 5)
    .attr('cx', function(d) {
      return d.x
    })
    .attr('cy', function(d) {
      return d.y
    });
}

• 力中心(forceCenter)：将元素作为一个整体围绕着中心点居中

//可以用中心位置初始化
d3.forceCenter(100, 100)

//或使用配置功能.x()和.y()
d3.forceCenter().x(100).y(100)

//将其添加到系统中
simulation.force('center', d3.forceCenter(100, 100))

• forceManyBody：使所有元素相互吸引或排斥。可以设置吸引或排斥的强度。.strength()正值将导致元素相互吸引，而负值将导致元素相互排斥。默认值为-30。

simulation.force('charge', d3.forceManyBody().strength(-20))

• 力碰撞(forceCollide)：用于阻止圆形元素重叠。在将圆形“聚集”在一起时特别有用。此函数的第一个参数d是连接数据，您可以从中得出半径。

var numNodes = 100
var nodes = d3.range(numNodes).map(function(d) {
  return {radius: Math.random() * 25}
})

var simulation = d3.forceSimulation(nodes)
  .force('charge', d3.forceManyBody().strength(5))
  .force('center', d3.forceCenter(width / 2, height / 2))
  .force('collision', d3.forceCollide().radius(function(d) {
    return d.radius
  }))

• forceX 和 forceY：导致元素被吸引到指定的位置。可以对所有元素使用一个中心，也可以在每个元素的基础上施加力。

var xCenter = [100, 300, 500];

var simulation = d3.forceSimulation(nodes)
  .force('charge', d3.forceManyBody().strength(5))
  .force('x', d3.forceX().x(function(d) {
    return xCenter[d.category];
  }))
  .force('collision', d3.forceCollide().radius(function(d) {
    return d.radius;
  }));

可以使用forceX或forceY沿轴定位元素

var simulation = d3.forceSimulation(nodes)
  .force('charge', d3.forceManyBody().strength(5))
  .force('x', d3.forceX().x(function(d) {
    return xScale(d.value);
  }))
  .force('y', d3.forceY().y(function(d) {
    return 0;
  }))
  .force('collision', d3.forceCollide().radius(function(d) {
    return d.radius;
  }));

• 力链接(forceLink)：将链接的元素推到一个固定的距离。它需要一组链接来指定您希望将哪些元素链接在一起。每个链接对象指定一个源元素和目标元素，其中值是元素的数组索引：

var links = [
  {source: 0, target: 1},
  {source: 0, target: 2},
  {source: 0, target: 3},
  {source: 1, target: 6},
  {source: 3, target: 4},
  {source: 3, target: 7},
  {source: 4, target: 5},
  {source: 4, target: 7}
]

var simulation = d3.forceSimulation(nodes)
  .force('charge', d3.forceManyBody().strength(-100))
  .force('center', d3.forceCenter(width / 2, height / 2))
  .force('link', d3.forceLink().links(links));

//可以使用.distance()（默认值为 30）和配置链接元素的距离和强度.strength()。