如何在D3.js柱状图中正确显示无数据提示信息？

嘿，你的思路方向是对的，但大概率是在定位逻辑和样式适配D3 SVG的规则上出了小问题，咱们来一步步修正：

核心问题分析 #

1. SVG元素的定位规则和普通HTML不同：你给.noData加了position: absolute，但SVG本身默认没有设置position: relative的话，绝对定位的参考对象会是整个文档，文本很可能跑到了可视区域外面，自然看不到。
2. CSS transform在SVG里不是标准用法：D3的SVG元素优先用attr("transform", "...")来处理位置变换，CSS的transform虽然部分浏览器兼容，但稳定性差，你的translate(-50%, -50%)可能根本没生效，导致文本没居中到SVG容器里。

修正后的代码示例 #

1. 调整JavaScript逻辑，用SVG原生属性居中文本

// 假设你已经定义了SVG的width和height变量（比如从容器获取或手动设置）
if (requests.length === 0) {
  svg.append('text')
    .classed('noData', true)
    .text("No Data")
    .attr('x', width / 2) // 水平方向居中到SVG中点
    .attr('y', height / 2) // 垂直方向居中到SVG中点
    .attr('text-anchor', 'middle') // 让文本以x坐标为中心对齐
    .attr('dominant-baseline', 'middle'); // 让文本以y坐标为中心对齐
}

2. 简化CSS样式，去掉多余的定位属性

.noData {
  font-size: 24px;
  color: #666;
  font-weight: 200;
  /* 去掉position和transform，改用上面的SVG属性控制位置 */
}

额外排查点 #

如果还是不显示，可以做这几个小测试：

• 在判断条件里加个console.log('无数据提示触发')，确认代码逻辑真的走到了这一步；
• 检查SVG容器的width和height是否有有效值，如果是NaN的话，居中计算会失效；
• 临时给.noData加stroke: red; stroke-width: 1px，看是不是被其他图表元素覆盖了。

内容的提问来源于stack exchange，提问作者Irmantas Želionis