D3.js折线图hover圆点时Tooltip已在DOM但无法显示的问题

先找问题根源 #

你的代码里有几个直接导致Tooltip不显示的核心问题：

• SVG嵌套div无效：如果d3Chart.current指向的是SVG元素本身，SVG内部不允许直接放置<div>标签，即便DOM中能看到该元素，浏览器也不会正常渲染它。
• 缺少定位与坐标设置：就算把opacity改为0.9，Tooltip默认是静态定位，要么被SVG图层遮挡，要么跑到可视区域外。
• D3事件参数错误：D3 v6+的事件回调第一个参数是事件对象，你原来的function(d)无法获取鼠标位置，就算想定位Tooltip也做不到。

一步步修复 #

1. 调整Tooltip挂载位置 #

把Tooltip挂载到body或者SVG的父容器，不要直接挂载到SVG内部：

const tooltip = d3
  .select("body") // 也可以用SVG的父元素：d3.select(d3Chart.current.parentElement)
  .append("div")
  .attr("class", "tooltip")
  .style("opacity", 0)
  .style("background-color", "red")
  .style("position", "absolute") // 必须加绝对定位才能自由调整位置
  .style("pointer-events", "none") // 防止Tooltip抢占鼠标事件
  .style("z-index", 1000) // 确保Tooltip在SVG图层上方
  .html(`<p>test</p>`);

2. 修正mouseover事件，添加位置计算 #

更新事件回调，获取鼠标位置并设置Tooltip的坐标：

const mouseover = function (event, d) {
  console.log("tooltip");
  tooltip
    .transition()
    .duration(200)
    .style("opacity", 0.9);
  // 将Tooltip放在鼠标旁侧，避免遮挡圆点
  tooltip
    .style("left", `${event.pageX + 10}px`)
    .style("top", `${event.pageY - 10}px`);
};

3. 确保React Ref已就绪 #

在React组件中，必须在useEffect钩子内初始化D3相关逻辑，保证d3Chart.current已经挂载到DOM：

useEffect(() => {
  if (!d3Chart.current) return;
  // 在这里编写创建Tooltip、绘制折线图、绑定事件的代码
}, [data]); // 依赖data，数据更新时重新执行渲染逻辑

4. 补全Tooltip基础样式 #

给.tooltip添加基础样式，避免显示异常：

.tooltip {
  padding: 6px 10px;
  border-radius: 4px;
  color: white;
  font-size: 14px;
}

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