Javascript IE使用getBoundingClientRect（）计算不正确

我原以为我的Angular应用程序的D3轴可以在Internet Explorer中运行，但在Chrome上开发了几个星期后，我今天意识到它现在已经在IE中被打破了

我的X轴有三个部分。一个是日期标签，下一个是小时标签，然后是表示每个小时的“条形图”

在Chrome中看起来是这样的：

在IE 11中，宽度计算失败。以下是交替条的代码：

hoursBarUpperG
  .selectAll('.tick')
  .sort(function(a: any, b: any) {
    return ascending(a, b);
  })
  .each(function(this: any, _d: any, i: any) {
    if (this.nextSibling) {
      select(this)
        .append('rect')
        .attr(
          'width',
          this.nextSibling.firstChild.getBoundingClientRect().x - this.firstChild.getBoundingClientRect().x
        )
        .attr('height', 6)
        .attr('class', i % 2 ? 'lightGrayBar' : 'darkGrayBar');
    }
  });

问题是rect被附加了属性'width'，结果是'Nan'。 在Chrome中，getBoundingClientRect（）返回一个DOMRect。在IE中，我得到一个没有“x”字段的ClientRect

---

有没有比使用getBoundingClientRect（）更好的方法来正确设置这些条的宽度？

更新：我发现将代码改为使用“left”而不是“x”似乎可以解决IE中的问题

this.nextSibling.firstChild.getBoundingClientRect().left - this.firstChild.getBoundingClientRect().left

我仍然很想知道是否有人有更好的方法来进行计算