D3.js v6中event.currentTarget指向异常问题求助

我明白你遇到的困扰了——在D3 v6里，因为用来触发交互的是g容器内部的rect（毕竟g本身没有可点击的物理区域，通常会用rect作为“悬停/点击触发区”），所以event.currentTarget自然会指向这个rect元素，而非父级的g，导致你找不到要修改的text元素。下面给你几个实用的解决方案：

方法1：直接获取父节点（最简单直接） #

既然rect是g的直接子元素，你可以通过parentNode直接定位到父级g元素，修改代码如下：

d3.select(event.currentTarget.parentNode).select("text").text(y.invert(pos.y).toFixed(2));

这个方法代码简洁，适合DOM结构固定的场景（比如你的示例里g仅包含rect和text）。

方法2：使用closest()方法（更鲁棒） #

如果后续你的DOM结构可能发生变化（比如rect外面多了一层嵌套容器），可以先给g元素添加一个自定义类名（比如tooltip-group），然后用closest()方法向上查找最近的匹配元素：

// 创建g元素时添加类名
const tooltipGroup = svg.append('g')
  .attr('class', 'tooltip-group')
  // 其他属性设置...

// 事件处理函数中修改文本
d3.select(event.currentTarget.closest('.tooltip-group')).select("text").text(y.invert(pos.y).toFixed(2));

这种方法不依赖固定的父子层级，只要g的类名不变，就能准确找到目标元素，容错性更强。

方法3：利用事件路径composedPath() #

现代浏览器支持event.composedPath()方法，它会返回事件触发的完整路径数组，你可以从中取出父级g元素：

// 数组第一个元素是触发事件的rect，第二个就是父级g
const targetG = event.composedPath()[1];
d3.select(targetG).select("text").text(y.invert(pos.y).toFixed(2));

不过要注意，这个方法在部分老旧浏览器里可能不支持，如果你的项目不需要兼容旧浏览器，这个方法也很方便。

另外补充一点：在D3 v6中，this不再默认指向选中的元素，但如果你需要保留传统的this指向，也可以通过.bind()手动绑定，但上面的几种方法更符合D3 v6的新特性规范。

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