D3嵌套组元素链式选择与更新：Enter阶段Tooltip不跟随鼠标

你的问题确实是组元素的选择与变量存储方式导致的。核心bug在于：
你定义的children变量仅从parents（update阶段的已存在元素选择集）中选取g.child，完全没包含enter阶段新创建的enterChild。所以鼠标移动事件触发时，只有旧的tooltip会响应translate操作，新生成的tooltip根本没被选中，自然保持静态位置。

关键修复步骤 #

1. 合并enter与update选择集：D3中需要用merge()把enter阶段创建的新元素和update阶段的旧元素合并成一个完整的选择集，确保后续操作能覆盖所有元素。
2. 重新获取包含所有子元素的选择集：在合并parents之后，再从完整的父元素选择集中选取所有g.child，确保包含新创建的tooltip。

修正后的代码示例 #

// dummy data
let data = [
 { key: 1, 
   light: "#ffffff", // 修正原代码语法错误：= 改为 :，颜色值加引号
   dark: "#000000" },
 // ... 其他数据项
 { key: n, 
   light: "#eeeeee",
   dark: "#222222" }
]

//=== D3 ====

const svg = d3.select('svg')

const parents = svg
   .selectAll('g.parent')
   .data(data, d => d.key) // 正确使用唯一标识维持对象恒定性

// ENTER
const enterParents = parents
   .enter()
   .append('g')
   .attr('class', 'parent')
   .attr('width', 800)
   .attr('height', 360)

enterParents
   .append('element')
   .attr('class', 'parent')
   .attr('fill', d => d.light)

// 为新创建的父元素添加tooltip子组
enterParents
   .append('g')
   .attr('class', 'child')
   .append('element')
   .attr('class', 'child') // 修正原代码语法错误：class() 改为 attr('class', ...)
   .attr('fill', d => d.light)

// 合并enter与update选择集，得到包含所有父元素的完整选择集
const allParents = enterParents.merge(parents)

// 获取包含所有tooltip子组的完整选择集（包括新创建的）
const allChildren = allParents.select('g.child')

// UPDATE
allParents
   .select('element.parent')
   .attr('fill', d => d.dark)

allChildren
   .select('element.child')
   .attr('fill', d => d.dark)

// 鼠标移动事件绑定到所有父元素
allParents
   .on('mousemove', function(e) {
       const [mouseX, mouseY] = d3.pointer(e)
       
       // 现在allChildren包含所有tooltip，包括新创建的，都能响应移动
       allChildren.attr('transform', `translate(${mouseX}, ${mouseY})`)
   })

你的假设验证 #

逐一验证你提出的四个假设：

• 假设1：正确。selectAll(selector)会递归遍历所有后代元素并返回扁平化的选择集；select(selector)会选择当前元素下第一个匹配的后代，并继承父元素的数据上下文。
• 假设2：正确。链式调用select会沿着DOM层级向下查找，且始终保留父元素绑定的数据，能正确选中目标子元素进行更新。
• 假设3：正确。子元素会自动继承父元素绑定的数据，不需要在子元素链中重新调用data()，数据会通过父元素传递下去。
• 假设4：正确。如果你的场景确实不需要删除元素，完全可以省略exit部分，只处理enter和update阶段。

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