Angular结合D3.js实现堆叠柱状图时Tooltip提示框缺失问题求助

问题原因 #

你遇到的是Tooltip样式配置缺失导致的渲染问题，CodeSandbox默认的全局样式补全了缺失的定位规则，本地项目无对应全局样式就会出现DOM存在但不可见的情况，核心原因有三个：

1. Tooltip未设置position: absolute，你代码中修改的left、top属性对默认静态定位的元素无效
2. 未设置足够高的z-index，Tooltip可能被页面其他元素遮挡
3. 坐标计算逻辑适配性差，你直接将event.x/event.y除以2的逻辑只适配CodeSandbox的布局，本地页面布局不同的话会直接把Tooltip定位到视口外

解决方案 #

步骤1：补全Tooltip基础样式

修改Tooltip初始化代码，新增定位和层级配置：

// Create a tooltip.
const tooltip = d3.select("#stacked-bar-tooltip")
.append("figure")
.style("opacity", 0)
.attr("class", "tooltip")
.style("position", "absolute") // 新增：启用位置偏移配置
.style("z-index", "9999") // 新增：提高层级避免被其他元素遮挡
.style("background-color", "white")
.style("border", "solid")
.style("border-width", "1px")
.style("border-radius", "5px")
.style("padding", "10px")

步骤2：修改坐标计算逻辑

删除坐标除以2的适配逻辑，改为基于视口坐标偏移，避免和项目布局耦合：

const mousemove = function(event, d) {
  tooltip.style("transform", "translateY(-55%)")  
        .style("left", (event.clientX + 10) + "px") // 向右偏移10px避免遮挡鼠标
        .style("top", (event.clientY - 10) + "px") // 向上偏移10px
}

可选优化：解决父容器裁剪问题

如果修改后Tooltip仍然不可见，检查#stacked-bar-tooltip的父元素是否设置了overflow: hidden，如果存在裁剪限制，将Tooltip的挂载节点改为body即可：

const tooltip = d3.select("body") // 改为挂载到body，不受父容器裁剪限制
.append("figure")
// 其余配置不变

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