title: d3 skips first index in an array when appending circles
body: <p>I'm new to using D3 and I'm trying to evenly place circles around another circle by dividing into n pieces. The problem is that it does not draw the first circle even though coords[0] exists. Instead it places starts at coords[1] and continues. Any reason why this is and how to fix it?</p>
  
  <p>main.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;A Circle&lt;/title&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;script type="text/javascript" src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.16.1/math.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script type="text/javascript" src="circle.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>circle.js</p>
  
  <pre><code>    var w = 500;
      var h = 500;
      var n = 10;
      var r = h/2-20;
      var coords = [];
  
      for (var i = 0; i&lt;n; i++)
      {
          var p_i = {};
          p_i.x = w/2+r*math.cos((2*math.pi/n)*i);
          p_i.y = h/2-r*math.sin((2*math.pi/n)*i);
          coords.push(p_i);
      }
  
  
      var svg = d3.select('body') //SVG Canvas
          .append('svg')
          .attr('width', w)
          .attr('height', h);
  
      var circle = svg.append('circle') //Draw Big Circle
          .attr('cx', w/2)
          .attr('cy', h/2)
          .attr('r', r)
          .attr('fill', 'teal')
          .attr('stroke', 'black')
          .attr('stroke-width', w/100);
  
      var center = svg.append('circle') //Construct Center
          .attr('cx', w/2)
          .attr('cy', h/2)
          .attr('r', r/50)
          .attr('fill', 'red')
          .attr('stroke', 'black')
          .attr('stroke-width', w/100);
  
      var approx_pts = svg.selectAll('circle')
          .data(coords, function(d)
                {
                    return this.id;
                })
          .enter()
          .append('circle')
          .attr('cx', function(d)
                {
                    return d.x;
                })
          .attr('cy', function(d)
                {
                    return d.y;
                })
          .attr('r', w/100)
          .attr('fill', 'black');
  </code></pre>