D3.js v5 Swarm Tree：如何迭代将swarm居中对齐到树节点周围

d3.forceSimulation 运行时会自动为每个绑定的数据元素动态挂载位置、速度类的内部属性（x/y/vx/vy），但传入的movies数组全是字符串原始值（如"0_movie"），原始值不支持动态挂载自定义属性，模拟引擎执行属性赋值时就会直接抛出Cannot create property 'vx'的错误。 #

1. 适配力导引擎的数据源结构 #

力导引擎要求所有参与模拟的数据项必须是可扩展对象，不能是字符串、数字这类原始值。需要把原来的字符串形式的电影列表，包装成对象结构：

// 原错误写法（字符串数组，无法挂载属性）
"movies": d3.range(50).map(function(v) {return v.toString()+'_movie'})

// 修正写法（对象数组，支持引擎挂载内部属性）
"movies": d3.range(50).map(function(v) {
  return { movieId: v.toString() + '_movie' }
})

2. 批量为所有叶子节点生成对应swarm集群 #

原代码硬编码写死了单个节点的swarm位置，没有和树节点的实际坐标做绑定，也没有遍历所有叶子节点做迭代。修正时需要把swarm的生成逻辑和每个叶子节点的坐标做绑定：

• 提前缓存每棵树的层级计算结果，避免重复调用miniTree做坐标计算
• 遍历每个地区的分组，找出分组下所有带movies属性的叶子演员节点
• 为每个叶子节点独立生成适配的力导模拟，模拟的引力中心直接对齐对应演员大圆形的坐标
• 每个swarm的小圆圈直接挂载在所属的地区分组下，自动继承分组的平移变换，不需要手动计算全局坐标

// 预计算所有地区的树结构坐标，避免重复计算
const regionTreeCache = data.map(region => miniTree(d3.hierarchy(region.tree)))

// 遍历每个地区的分组元素
regionG.each(function(regionDatum, regionIndex) {
  const currentRegionGroup = d3.select(this)
  const currentTree = regionTreeCache[regionIndex]

  // 筛选出所有代表演员的叶子节点（带有movies属性的节点）
  const actorLeafNodes = currentTree.descendants().filter(node => node.data.movies)

  // 为每个演员节点生成专属的swarm
  actorLeafNodes.forEach(actorNode => {
    // 演员节点大圆形在当前地区分组内的坐标，和之前渲染大圆形的偏移逻辑完全一致
    const centerX = actorNode.x - 25
    const centerY = actorNode.y + 20

    // 初始化当前节点的swarm力导模拟
    const swarmSimulation = d3.forceSimulation(actorNode.data.movies)
      .force("x", d3.forceX(centerX).strength(0.05)) // 横向引力对齐大圆形中心
      .force("y", d3.forceY(centerY).strength(0.05)) // 纵向引力对齐大圆形中心
      .force("collide", d3.forceCollide(4).iterations(2)) // 控制小圆圈不重叠
      .stop()
    // 预运行足够次数的迭代，让小圆圈排布均匀稳定
    swarmSimulation.tick(100)

    // 在当前地区分组下渲染swarm小圆圈
    currentRegionGroup.selectAll(null)
      .data(actorNode.data.movies)
      .enter()
      .append("circle")
      .attr("r", 3)
      .attr("cx", d => d.x)
      .attr("cy", d => d.y)
      .style("fill", "#4f81b9")
  })
})

• 每个演员对应的小圆圈会自动围绕自身的大圆形标记排布，不会错位到其他节点
• 所有地区、所有演员节点的swarm会一次性渲染完成，不需要单独写硬编码逻辑
• 小圆圈之间会保持固定间距，不会出现重叠扎堆的问题

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