Angular+D3图表X轴在IE11中宽度计算异常：getBoundingClientRect()返回NaN

嗨，我之前做D3可视化时也踩过IE11兼容性的坑，结合你描述的情况——Chrome正常显示但IE11里条形的width变成NaN，大概率是IE11对JavaScript API的支持差异导致的，尤其是日期解析和数值计算这块，下面给你梳理几个排查和解决方向：

1. 先定位NaN的源头 #

打开IE11的开发者工具（F12），找到那个width为NaN的rect元素，然后追溯计算宽度的代码逻辑，用console.log()打印相关变量：

• 检查传给x轴比例尺的日期/数值是否合法，比如日期对象在IE11里是不是变成了Invalid Date；
• 看看比例尺的输出值（比如xScale(d.date)）是不是NaN，如果是，问题就出在比例尺的输入数据上。

2. 修复日期解析的兼容性问题 #

IE11对ISO格式日期的解析很挑剔，比如'2024-05-20 14:00'这种不带T分隔符的字符串，IE11会解析失败，变成无效日期，转成数值就是NaN，进而导致比例尺计算出错。

解决办法：

• 手动转换日期字符串为IE11能识别的格式：

  // 处理日期字符串，适配IE11
  const formatForIE = dateStr => {
    return dateStr.replace(' ', 'T') + '+08:00'; // 换成对应时区的ISO格式
  };
  // 用D3的时间解析器处理转换后的字符串
  const parseTime = d3.timeParse('%Y-%m-%dT%H:%M:%S%Z');
  const processedData = rawData.map(d => ({
    ...d,
    hourStart: parseTime(formatForIE(d.hourStart)),
    hourEnd: parseTime(formatForIE(d.hourEnd))
  }));
  

• 或者直接用new Date()构造日期，避免依赖字符串解析：

  // 假设数据里有年、月、日、小时字段
  const processedData = rawData.map(d => ({
    ...d,
    hourStart: new Date(d.year, d.month - 1, d.day, d.hour), // 注意月份是0基
    hourEnd: new Date(d.year, d.month - 1, d.day, d.hour + 1)
  }));
  

3. 给宽度计算加安全兜底 #

就算日期解析没问题，IE11对隐式类型转换的处理也更严格，比如某个变量意外变成undefined，计算出来的width就会是NaN。可以在代码里加判断，避免无效值：

svg.selectAll('.hour-bar')
  .data(processedData)
  .enter()
  .append('rect')
  .attr('width', d => {
    const startX = xScale(d.hourStart);
    const endX = xScale(d.hourEnd);
    // 兜底：如果计算结果是NaN，就设为0
    return isNaN(startX) || isNaN(endX) ? 0 : endX - startX;
  });

4. 检查是否使用了IE不支持的API #

如果代码里用了这些特性，IE11会直接报错或返回异常值：

• 箭头函数：换成普通的function写法；
• Array.prototype.includes、Array.from等ES6+数组方法：在Angular的polyfills.ts里引入core-js的polyfill：

  // polyfills.ts中添加
  import 'core-js/es/array';
  import 'core-js/es/date';
  

• 模板字符串：换成普通字符串拼接。

最后小提示 #

调试IE11的时候，记得把代码里的async/await换成Promise链式调用，因为IE11完全不支持async语法。

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