title: IE not calculating correctly using getBoundingClientRect()
body: <p>I thought I had my Angular app's D3 axis working in Internet Explorer but after developing for a few weeks in Chrome I realized today that it is now broken in IE. </p>
  
  <p>I have 3 parts to my X axis. One is the date labels, next is the hour labels, and then "bars" to represent each hour.</p>
  
  <p>It looks like this in Chrome:
  <a href="https://i.stack.imgur.com/XPWGv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XPWGv.png" alt="enter image description here"></a></p>
  
  <p>In IE 11 the width calculation is failing. Here's the code for the alternating bars:</p>
  
  <pre><code>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');
      }
    });
  </code></pre>
  
  <p>The problem is that the rect is getting appended with the attribute 'width' coming out as 'Nan'. 
  In Chrome the getBoundingClientRect() returns a DOMRect. In IE I get a ClientRect which doesn't have a 'x' field.</p>
  
  <p>Is there a better alternative than using getBoundingClientRect() so that I can properly set the width of these bars?</p>