D3.js径向力中心移动异常：修改x,y后节点未对齐求助

我创建了一个径向力示例，用于试验径向圆中心点的移动。根据文档，d3.forceRadial(radius[, x][, y])的第2、3个参数接收x和y坐标。但实际操作时，原本默认中心在(0,0)时整齐排列在圆上的节点，修改x、y后不再对齐——默认中心时节点整齐分布在圆上，修改中心到(50,40)后节点分布杂乱，未贴合目标圆。我的模拟代码如下：

var simulation = d3.forceSimulation(nodes)
    .force("charge", d3.forceCollide().radius(5))
    .force("r", d3.forceRadial(100, 50, 40)) // << change x and/or y here
    .on("tick", ticked);

仅存在碰撞力的情况下，修改径向力的x、y中心为何无法让节点简单移动到新的圆上？

问题原因及解决方法 #

核心原因 #

D3的力导向模拟是迭代收敛的过程，不是直接设置节点位置的指令：

• 修改径向力中心后，模拟需要逐次计算每个节点的受力，逐步将节点拉向新的目标圆。
• 碰撞力（forceCollide）要求节点保持间距，会和径向力形成相互制衡，节点需要在“被拉向目标圆”和“不与其他节点重叠”之间找到平衡，这个过程需要足够多的迭代周期才能完成。
• 默认的模拟迭代次数可能不足以支撑节点完全收敛到新位置，尤其是中心偏移幅度较大时。

解决办法 #

• 增加迭代次数：修改径向力后，手动调用simulation.tick()多次，比如simulation.tick(300)，让模拟多运行几轮，节点会逐渐对齐到新圆上。
• 提高径向力强度：通过forceRadial.strength()方法增强拉动力，比如d3.forceRadial(100, 50, 40).strength(0.8)（默认强度为0.1），让节点更快向目标圆靠拢。
• 重置初始位置：手动将节点的x、y初始值设置到新中心附近，减少收敛所需的迭代次数。

内容的提问来源于stack exchange，提问作者citykid