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');
    }
  });

问题是矩形附加了属性“width”，显示为“Nan”。 在 Chrome 中，getBoundingClientRect() 返回一个 DOMRect。在 IE 中，我得到一个没有“x”字段的 ClientRect。

是否有比使用 getBoundingClientRect() 更好的替代方法，以便我可以正确设置这些条形的宽度？

Answer 1

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

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

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