使用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

更新：我发现更改代码以使用＆＃39; left＆＃39;而不是＆＃39; x＆＃39;似乎解决了IE中的问题。

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

我仍然希望听到有人有更好的想法来做这个计算！