d3.js树状图如何实现鼠标悬停节点时在节点位置弹出提示框

现有d3树状图效果如下：

实现节点悬停弹出提示有两种常用方案，按需选择即可：

方案1：快速实现原生提示 #

不需要额外写样式和DOM，直接给节点追加SVG的title元素即可，浏览器会自动在悬停时显示默认样式的提示，缺点是无法自定义样式、动画。
示例代码：

// nodeGroups是你绘制节点时的d3选择集，通常是绑定了层级数据的g元素选择集
nodeGroups.append("title")
  .text(d => `节点名称：${d.data.name}\n关联数值：${d.data.value || '无'}`)

方案2：自定义样式提示框（推荐） #

可以完全控制提示框的样式、内容、位置，交互体验更好，分两步实现：

• 先添加提示框的基础样式和DOM节点

.tooltip {
  position: absolute;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  border-radius: 4px;
  font-size: 13px;
  pointer-events: none; /* 关键属性，避免提示框遮挡节点触发鼠标移出事件 */
  opacity: 0;
  z-index: 100;
}

<div class="tooltip"></div>

• 给节点绑定鼠标交互事件

const tooltip = d3.select(".tooltip");

// 绑定事件到你的节点选择集
nodeGroups
  .on("mouseover", (event, d) => {
    // 鼠标移入时显示提示框，填充自定义内容
    tooltip
      .style("opacity", 1)
      .html(`
        <p style="margin:0 0 4px 0;font-weight:500">${d.data.name}</p>
        <p style="margin:0">节点层级：${d.depth}</p>
      `);
  })
  .on("mousemove", (event) => {
    // 提示框跟随鼠标位置偏移，避免遮挡
    tooltip
      .style("left", `${event.pageX + 12}px`)
      .style("top", `${event.pageY - 8}px`);
  })
  .on("mouseout", () => {
    // 鼠标移出隐藏提示框
    tooltip.style("opacity", 0);
  });

注意：如果你的树图加了缩放平移功能，用event.pageX/pageY计算位置不需要额外处理变换偏移，适配成本最低；如果需要提示框固定在节点旁不跟随鼠标移动，计算位置时要把画布的transform缩放、平移值算入偏移。

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