D3力导向布局：增删含嵌套组的节点及实现分层双节点圆

一、如何添加和移除包含嵌套组的节点？ #

咱们一步步来拆解这个问题，核心是把每个节点对应成一个外层<g>组，内部嵌套你需要的子元素，然后通过D3的数据绑定来管理增删：

• 先定好DOM结构
  每个节点的嵌套组结构大概是这样的，外层组包裹所有子元素：

<g class="node-group">
  <circle class="main-circle"></circle>
  <circle class="sub-circle"></circle>
  <!-- 还可以加文本、图标之类的 -->
</g>

• 数据绑定与新增节点
  在你的restartD3()或者初始化函数里，先把节点数据绑定到外层组：

// 绑定数据到外层组，用节点唯一ID做键值，确保更新精准
const nodeGroups = this.circleNode.selectAll('.node-group')
  .data(nodes, d => d.id);

// 处理新增节点：先创建外层组，再往里加子元素
const newGroups = nodeGroups.enter()
  .append('g')
  .attr('class', 'node-group')
  // 给外层组加拖拽事件（如果需要的话）
  .call(d3.drag()
    .on('start', dragStarted)
    .on('drag', dragged)
    .on('end', dragEnded));

// 在新组里加第一个圆
newGroups.append('circle')
  .attr('class', 'main-circle')
  .attr('r', 12)
  .attr('fill', '#2ecc71');

// 再加第二个圆
newGroups.append('circle')
  .attr('class', 'sub-circle')
  .attr('r', 6)
  .attr('fill', '#e74c3c');

// 合并新增和已有节点的集合，后续统一处理
const allGroups = nodeGroups.merge(newGroups);

• 移除节点超简单
  直接对退出的外层组调用remove()就行，子元素会跟着父组一起被删掉，不用单独处理每个子元素：

nodeGroups.exit().remove();

• 更新节点位置
  力导向布局会更新节点数据里的x和y属性，咱们只需要把外层组的transform属性设为对应的坐标，内部所有子元素都会跟着移动：

allGroups.attr('transform', d => `translate(${d.x}, ${d.y})`);

二、实现按类型分层级的双圆节点（外层组包含两个子组） #

你说要把this.circleNode作为总外层组，内部每个节点的组里再分两个子组来放不同类型的圆，这个需求很容易实现，重点是把结构理清楚：

• 调整DOM结构
  总容器this.circleNode下面是一个个节点组，每个节点组里包含两个子组，分别对应两种类型的圆：

<g id="circleNode"> <!-- 也就是你的this.circleNode -->
  <g class="node-group" transform="translate(100,200)">
    <g class="circle-type-a-group">
      <circle r="10" fill="blue"></circle>
    </g>
    <g class="circle-type-b-group">
      <circle r="5" fill="orange"></circle>
    </g>
  </g>
  <!-- 其他节点组 -->
</g>

• 在restartD3()里实现逻辑
  因为你每秒要更新多次节点，一定要保证数据绑定的效率，用唯一ID做键值是关键：

function restartD3() {
  // 1. 绑定节点数据到外层node-group
  const nodeGroups = this.circleNode.selectAll('.node-group')
    .data(nodes, d => d.id);

  // 2. 移除不需要的节点
  nodeGroups.exit().remove();

  // 3. 创建新的节点外层组
  const newNodeGroups = nodeGroups.enter()
    .append('g')
    .attr('class', 'node-group')
    .call(d3.drag()
      .on('start', dragStarted)
      .on('drag', dragged)
      .on('end', dragEnded));

  // 4. 创建第一个子组和对应圆
  newNodeGroups.append('g')
    .attr('class', 'circle-type-a-group')
    .append('circle')
    .attr('r', 10)
    .attr('fill', d => d.category === 'primary' ? '#3498db' : '#95a5a6');

  // 5. 创建第二个子组和对应圆
  newNodeGroups.append('g')
    .attr('class', 'circle-type-b-group')
    .append('circle')
    .attr('r', 5)
    .attr('fill', '#f39c12');

  // 6. 合并集合，更新所有节点的位置
  const allNodeGroups = nodeGroups.merge(newNodeGroups);
  allNodeGroups.attr('transform', d => `translate(${d.x}, ${d.y})`);

  // 7. 重启力布局，让节点重新计算位置
  simulation.nodes(nodes);
  simulation.alpha(0.3).restart();
}

• 几个关键提醒
  • 所有位置更新只需要操作外层的node-group，内部子组和圆会自动跟随，不用逐个修改，性能更好。
  • 如果要批量修改某一类圆的样式，直接用.circle-type-a-group circle选择就能统一操作，非常方便。
  • 拖拽逻辑只需要更新节点数据的x和y，外层组的transform会在下一帧更新，子元素自然就移动了。

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