javascript - IE 无法使用 getBoundingClientRect() 正确计算

Question

我以为我的 Angular 应用程序的 D3 轴可以在 Internet Explorer 中工作，但在 Chrome 中开发了几周后，我今天意识到它现在在 IE 中被破坏了。

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

在 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() 更好的替代方法，以便我可以正确设置这些条的宽度？

Answer 1

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

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

不过，我仍然很想听听是否有人对进行此计算有更好的想法!