解释 d3 定心力

Question

D3的力模拟定心力使用如下代码其中：

• n 等于节点数，
• x 等于居中 x 值
• y 等于居中的 y 值
• sx 和 sy 为 0。

source code

首先强制这样做：

for (i = 0; i < n; ++i) {
  node = nodes[i], sx += node.x, sy += node.y;
}

然后：

for (sx = (sx / n - x) * strength, sy = (sy / n - y) * strength, i = 0; i < n; ++i) {
  node = nodes[i], node.x -= sx, node.y -= sy;
}

这是一个中心力？

第一部分和第二部分分别做什么？

Answer 1

D3 的定心力不会将节点推到中心，它会移动节点，使它们的重心（更接近）指定位置（所有节点质量相同）。换句话说，它不会对任何单个节点施加引力。相反，如果所有节点都位于指定中心的右侧，则它们都被平等地平移，以使实际重心接近指定的重心。这样，它不会将任何单个节点拉向中心，而是将所有节点均等地拉向指定的中心（即，它将图形作为单个实体拉向中心）。

第一部分将节点的 x 和 y 值的定位总结为sx 和sy（我的猜测是 s 代表 sum）。第二部分使用这些总数找到平均位置（sx/n - x，其中 n 等于节点数，x 是中心 x 值）并根据效果的强度对每个节点应用相同的校正。

如果您希望将节点拉近中心点，这种力将无济于事。相反，您可以使用 d3.forceX 和 d3.forceY ：

x 和 y 定位力以可配置的强度将节点沿给定维度推向所需位置。 (docs)

这里的 x 和 y 值将分别将节点吸引到指定的 x 值、y 值或坐标，具体取决于您使用 d3.forceX 和 d3.forceY 之一还是两者。