D3 v7 力导向布局中的居中力：d3.forceCenter 完整指南与源码级原理解析

d3.forceCenter 是 d3-force 模块提供的内置居中力，它通过直接平移所有节点的位置（而非修改速度）使节点群体的重心精确落在指定坐标上，是力导向网络图、层次结构布局中保持图形不漂移出视口的关键组件。读完本文，你将完整掌握 forceCenter 的创建、x/y/strength 三个 API 的用法与默认值、它与 forceX/forceY/forceRadial 等位置力的本质区别，以及 v3 版本引入 strength 参数后在交互图（节点动态增删）中的实战调参思路。

一、center force 的核心机制：改位置，不改速度

根据 Center force 官方文档 的定义：

The center force translates nodes uniformly so that the mean position of all nodes (the center of mass if all nodes have equal weight) is at the given position ⟨x, y⟩. This force modifies the positions of nodes on each application; it does not modify velocities, as doing so would typically cause the nodes to overshoot and oscillate around the desired center.

拆解这段定义，有三个要点：

1. 均匀平移（uniform translation）：每次力被应用时，d3-force 会计算所有节点的平均位置（等权重下即质心），然后把所有节点朝目标中心 ⟨x, y⟩ 平移相同的偏移量。结果是整个图形"刚体式"地整体移动，节点之间的相对关系完全不变。
2. 只改位置、不改速度：这是居中力区别于其他力的根本设计。如果通过给节点速度施加力来居中，节点会"冲过头"并在中心附近来回振荡（overshoot and oscillate）；直接修改位置则一步到位、无振荡。
3. 不扭曲相对位置：文档明确指出，与位置力（position forces）不同，center force 保持各节点间的相对布局不变——它只负责"整体搬家"，不负责"内部整形"。

这个机制决定了它最典型的应用场景：保持节点群体居中于视口。由于它不干扰其他力（斥力、连线力）塑造的布局结构，因此几乎可以无条件地叠加到任何力导向模拟中。

二、forceCenter(x, y)：创建居中力

创建 API 签名（摘自 docs/d3-force/center.md）：

const center = d3.forceCenter(width / 2, height / 2);

• 参数 *x*、*y*：居中目标位置的坐标。
• 默认值：*x*、*y* 均缺省时默认为 ⟨0,0⟩，即 SVG/Canvas 画布的原点——这正是绝大多数图可视化场景的"坑"：不传参数的节点会往左上角聚而不是画面中央。
• 返回值：一个 center force 实例，通过 simulation.force(name, force) 挂载到模拟上。

在当前仓库中的位置

本仓库是 d3 的聚合包（package.json 中 version 为 7.9.0），d3.forceCenter 并非在这里实现，而是来自依赖的 d3-force 子模块（"d3-force": "^3.0.0"）。聚合入口 src/index.js 通过 export * from "d3-force"; 将其重新导出，因此 import * as d3 from "d3" 后即可直接使用 d3.forceCenter。测试文件 test/d3-test.js 遍历 package.json 中每个依赖模块并断言"d3 exports everything from ${moduleName}"，保证了 forceCenter 等所有 d3-force 导出与顶层 d3 命名空间的一致性。

子模块 d3-force 的实现源码位于其独立仓库的 src/center.js（对应 d3-force@^3.0.0，本仓库通过依赖引入）。

三、center.x(x) 与 center.y(y)：分别设置中心坐标

两个 getter/setter 方法用于在创建之后动态调整居中目标：

center.x(x)

若指定 *x*，将居中的 x 坐标设为该数字并返回该力本身（链式调用）；若未指定 *x*，返回当前 x 坐标，默认为 0。

center.y(y)

若指定 *y*，将居中的 y 坐标设为该数字并返回该力本身；若未指定 *y*，返回当前 y 坐标，默认为 0。

典型用途是响应式布局——画布尺寸变化时同步更新中心点：

const simulation = d3.forceSimulation(nodes)
    .force("center", d3.forceCenter(width / 2, height / 2));

// 例如在 resize 处理中：
window.addEventListener("resize", () => {
  const {width, height} = measureViewport();
  simulation.force("center").x(width / 2).y(height / 2);
  simulation.alpha(0.3).restart(); // 轻微加热让布局平滑过渡到新中心
});

由于 x/y 是独立的可变属性，你可以只锁住水平方向、让垂直方向随内容自适应，或反之。

四、center.strength(strength)：v3 新增的柔化参数

参数说明

若指定 *strength*，设置居中力的强度；若未指定，返回当前强度，默认为 1。降低强度（例如 0.05）可以在节点动态进出图形的交互式图中柔化移动（softens the movements）。

这是 d3-force v3 引入的能力。本仓库的 CHANGES.md 在 d3-force 的 v3.0 变更记录中明确列出：

• Add forceCenter.strength
• Add iterations argument to simulation.tick
• Add forceSimulation.randomSource
• All built-in forces are now fully deterministic (including "jiggling" coincident nodes).

从源码结构看 strength 的工作方式

在 v3 的实现中，strength 不再改变"一次平移全部偏移量"的语义，而是对整体平移做缩放：每次 tick 计算质心后，节点朝中心移动的量为 (center - centroid) × strength。由此产生两档行为：

• strength = 1（默认）：每 tick 质心被精确搬到目标中心，图形瞬间锁定在视口中央，行为与旧版一致；
• strength < 1（如 0.05）：每 tick 只移动一小步，居中变成"缓慢回归"。当新节点加入时其初始位置往往远离图形（d3-force 用 phyllotaxis 螺旋布局初始化新节点），strength = 1 会导致整个图形被新节点"拽"得明显跳动；调低 strength 后这种拉扯被摊平到多个 tick 上，视觉上平滑得多，且不会打断用户对现有布局的注视。

文档给出的 0.05 是一个实用参考值：它对常规交互图足够平滑，同时不会慢到用户察觉"图形偏了没回去"。

五、在模拟中的完整用法：与 forceX/forceY 的分工

官方 simulation 文档 中给出的标准力导向图示例正是以 center force 收尾的（docs/d3-force/simulation.md#L92-L97）：

const simulation = d3.forceSimulation(nodes)
    .force("charge", d3.forceManyBody())
    .force("link", d3.forceLink(links))
    .force("center", d3.forceCenter());

注意两点细节：

• 示例中 d3.forceCenter() 未传参数，即居中于 ⟨0,0⟩——配合 d3.zoom 等交互时这并不碍事（用户可以缩放平移回来看全图），但若做静态展示图，建议显式传入画布中心；
• 传入 null 可按名称移除力：simulation.force("center", null);（docs/d3-force/simulation.md#L99-L103）。

center force 与位置力的本质区别

docs/d3-force/position.md 中的 forceX、forceY、forceRadial 属于另一类力，二者的分工需要分清：

维度	center force	forceX / forceY / forceRadial
作用对象	所有节点的整体质心	每个节点独立朝目标位置/圆拉拽
修改量	直接改位置，不改速度	按 (target - node.pos) × strength 改速度
对相对布局的影响	无（均匀平移）	有（会压缩/拉伸/环形化图形结构）
strength 语义	缩放每 tick 的整体平移量，默认 1	速度增量系数，默认 0.1，建议取 [0,1]
典型用途	保持图形居中于视口	约束某一维布局（如 x 轴对齐、环形放射）

一句话概括：position forces 塑造图形的形状，center force 决定图形停在哪里。常见组合是两者叠加——用 forceX(width/2) 约束水平展开宽度，再用 forceCenter(width/2, height/2) 兜底防止整体漂移。

六、实战：交互式图中调低 strength 与加热模拟的配合

在节点动态进出的图（如实时网络监控）中，推荐的完整模式如下：

const width = 900, height = 500;

const simulation = d3.forceSimulation(nodes)
    .force("link", d3.forceLink(links).id(d => d.id))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2).strength(0.05));

function update(newNodes, newLinks) {
  // 替换数据并重新初始化相关力
  simulation.nodes(newNodes);
  simulation.force("link").links(newLinks);
  // 新节点出现时轻微加热，让力重新分布；
  // 低 strength 的 center force 会平滑地把质心带回来
  simulation.alpha(0.5).restart();
}

配套说明：

• simulation.nodes(newNodes) 会用 phyllotaxis（向日葵螺旋）布局放置缺少坐标的新节点（docs/d3-force/simulation.md），这些节点天然远离现有图形，正是 strength 降低价值最大的场景；
• alpha/alphaTarget 的加热冷却机制（默认 alphaDecay ≈ 0.0228，即 1 - pow(0.001, 1/300)）决定了模拟收敛速度，与 center force 的 strength 相互独立——前者控制"模拟跑多久"，后者控制"每步回中多少"；
• 若图形长期不居中或轻微偏移，优先检查是否 alpha 已降到 alphaMin 以下模拟停止，用 simulation.restart() 或调大 alphaTarget 恢复。

七、API 速查表

API	签名	默认值	说明
创建	d3.forceCenter(x, y)	⟨0,0⟩	创建居中力，x/y 缺省为原点
设 x	center.x([x])	0	getter/setter，返回该力以支持链式调用
设 y	center.y([y])	0	getter/setter，同上
强度	center.strength([strength])	1	缩放每 tick 的整体平移量；0.05 左右用于交互图柔化
挂载	simulation.force("center", center)	—	按名称挂载；传 null 移除

小结

d3.forceCenter 用"直接改位置、不改速度"的均匀平移机制解决了力导向图最基础也最容易被忽视的问题——保持图形居中于视口而不扰动内部布局。配合 docs/d3-force/center.md 描述的 x/y/strength 三个 API，以及 simulation 文档 中的力挂载与加热机制，可以覆盖从静态展示图到节点动态进出交互图的绝大多数场景；需要进一步理解力导向模拟的通用模型（velocity Verlet 积分、alpha 冷却曲线、自定义力），可继续阅读 d3-force 模块总览。