title: IE (at least 11) and Edge not recognizing a .length property in d3.js
body: <p>I'm building a set of "dials" and menus for a web page mainly using d3.js. Everything draws as supposed in Chrome and Firefox, but IE11 and Edge seem to have a problem mainly figuring out the following <strong>d.name.length</strong> property:</p>
  
  <pre><code>function drawChart2(data2) {
  
  var arc2 = d3.arc()
      .outerRadius(chartHeight/1.4)
      .innerRadius(chartHeight/1.25)
      .padAngle(0.01);
  
  var halfPie = d3.pie()
      .value(function(d) { return d.name.length; })
      .startAngle(90 * (Math.PI/180))
      .endAngle(Math.PI);
  
  var rimG = rimChart.selectAll('g')
      .remove()
      .exit()
      .data([data2])
      .enter()
      .append('g');
  
  var block2 = rimG.selectAll('.rim')
      .data(halfPie)
      .enter()
      .append('g')
      .classed('rim', true);
  </code></pre>
  
  <p>This is part of a process of creating a "menu" on-the-fly where the slot sizes/widths are based on the underlying menu (data) item / text length, creating something along these lines:</p>
  
  <p><a href="https://i.stack.imgur.com/tUsX7.png" rel="nofollow noreferrer">Arched dial menu</a></p>
  
  <p>However, I get the following error message e.g. under IE11:</p>
  
  <blockquote>
    <p>SCRIPT5007: Unable to get value of the property 'length': object is null or undefined</p>
  </blockquote>
  
  <p>If I hardcode a length value instead of using d.name.length, the same error remains, but now seemingly in d3.js itself: File: d3.v4.min.js, row: 5, column: 5647, in the following code:</p>
  
  <pre><code>var a,c,s,f,l,h=t.length
  </code></pre>
  
  <p>Now I've read about problems in MS browsers with length properties, but cannot really pinpoint the problem here. Is this an issue in my code here or a general d3.js vs. IE compatibility thing, and is there a reasonable IE workaround for getting the length property of d.name?</p>