title: D3 - Correct number of elements on update, but wrong values
body: <p>I am populating a div with child divs containing the values from an array. On first pass, the array looks like this:</p>
  
  <pre><code>arr_subpop_unique = ["CPL", "NAP", "NPL", "SAP", "SPL", "TPL", "UMW", "WMT", "XER"]
  </code></pre>
  
  <p>My selection enter/update/exit looks like this:</p>
  
  <pre><code>var sizemapHeader = d3.select("#d3-sizemap-hr").selectAll("div")
          .data(arr_subpop_unique)
  
      sizemapHeader.enter().append("div")
          .attr("class", "sizemap-hr-title ellipsis scroll_on_hover")
          .html(function(d,i){ return d; });
  
      sizemapHeader.exit().remove();
  </code></pre>
  
  <p>This works fine, giving me a div for each element containing a string.</p>
  
  <p>When I run the function again, my data array updates to this:</p>
  
  <pre><code>    arr_subpop_unique = ["MAN_MADE", "NATURAL"]
  </code></pre>
  
  <p>The update returns two divs, however, they contain "CPL" and "NAP" (index values 0 and 1). Can someone explain why this would not replace the first two indicies with "MAN_MADE" and "NATURAL"?</p>
  
  <p>Thanks for the help...trying to get the hang of enter/update/exit data joins in D3!</p>