如何将节点从一个d3.js forceSimulation迁移至另一个？

核心问题 #

将节点从红色集群的forceSimulation迁移至蓝色集群的模拟后，迁移节点无法持续向蓝色集群的目标位置漂移——模拟进入稳定状态后，力的作用会停止，迁移的节点逐渐减速直至静止，初始加载后等待时间越长，该问题越明显。我原本以为节点会持续受到所属模拟的forceX、forceY力作用，不断靠近目标位置，但实际并非如此。

代码示例 #

HTML 代码 #

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body onload="loaded()">
  <div id='layout'>
    <div id='container'>
      <svg id="graph" />
    </div>
  </div>
</body>
</html>

JavaScript 代码 #

const width = 600;
const height = 200;

var nodes;
var simulations;

function loaded() {
  d3.select("svg")
    .attr("width", width)
    .attr("height", height)
  test();
}

function test() {
  nodes = [];
  nodes[0] = d3.range(50).map(function() {
    return {
      radius: 4,
      color: "blue"
    };
  })

  nodes[1] = d3.range(50).map(function() {
    return {
      radius: 4,
      color: "red"
    };
  })

  simulations = [null, null];

  update(0);
  update(1);

  setTimeout(startMigration, 1000);
}

function update(index) {
  simulations[index] = d3.forceSimulation(nodes[index])
    .force('charge', d3.forceManyBody().strength(10))
    .force('x', d3.forceX().x(function(d) {
      return width * (index + 1) / 3;
    }))
    .force('y', d3.forceY().y(function(d) {
      return height / 2;
    }))
    .force('collision', d3.forceCollide().radius(function(d) {
      return d.radius;
    }))
    .on('tick', ticked);

  function ticked() {
    var u = d3.select('svg')
      .selectAll('.circle' + index)
      .data(nodes[index])
      .join('circle')
      .attr('class', 'circle' + index)
      .attr('r', function(d) {
        return d.radius;
      })
      .style('fill', function(d) {
        return d.color;
      })
      .attr('cx', function(d) {
        return d.x;
      })
      .attr('cy', function(d) {
        return d.y;
      });
  }
}

function startMigration() {
  setInterval(function() {
    if (nodes[1].length > 10) {
      nodes[0].push(nodes[1].pop());

      d3.select('svg')
        .selectAll('.circle0')
        .data(nodes[0]);
      simulations[0].nodes(nodes[0]);

      d3.select('svg')
        .selectAll('.circle1')
        .data(nodes[1]);
      simulations[1].nodes(nodes[1]);
    }
  }, 250);
}

问题原因 #

D3的forceSimulation默认会在模拟“稳定”后自动停止：当节点速度低于阈值（默认alphaMin = 0.001）时，模拟会终止tick事件触发，力的计算随之停止。初始加载后等待时间越长，模拟的alpha值越低，越接近停止状态，此时迁移节点进入新模拟，不会受到持续的力作用，自然会减速直至静止。

解决方案 #

迁移节点时，需要手动重启目标模拟的力计算——通过提高模拟的alpha值重新激活力作用：

1. 更新模拟节点后，调用simulations[0].alpha(0.3).restart()，设置alpha值并重启模拟，让力重新作用于所有节点（包括新迁移的节点）；
2. 原模拟移除节点后，也可重启以调整剩余节点布局，提升视觉效果。

修改后的迁移代码：

function startMigration() {
  setInterval(function() {
    if (nodes[1].length > 10) {
      // 迁移节点
      const migratedNode = nodes[1].pop();
      nodes[0].push(migratedNode);

      // 更新蓝色集群的DOM绑定与模拟状态
      d3.select('svg').selectAll('.circle0').data(nodes[0]).join('circle');
      simulations[0].nodes(nodes[0]).alpha(0.3).restart();

      // 更新红色集群的DOM绑定与模拟状态
      d3.select('svg').selectAll('.circle1').data(nodes[1]).join('circle');
      simulations[1].nodes(nodes[1]).alpha(0.3).restart();
    }
  }, 250);
}

另外，原ticked函数中的join已包含数据绑定逻辑，迁移时单独的data()调用无需重复执行，合并到join中即可。

次要问题解答 #

迁移代码中的步骤并非全部必要：

• 必须步骤：
  1. 修改nodes数组完成节点迁移；
  2. 调用simulations[index].nodes(newNodes)更新模拟的节点集合；
  3. 对DOM选择集执行data().join()，确保DOM元素与新节点数据绑定（原代码中单独的data()调用无后续操作，实际未生效）。
• 可选但建议步骤：
  调用alpha().restart()重启模拟，确保力作用持续生效，解决迁移节点停止的问题。

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