title: What does D3.js "Data" function expect as its first argument?
body: <p>I'm having a lot of trouble trying to do a data bind combining an array onto an existing svg map.</p>
  
  <p>The array contains objects which have a <code>name</code> property that corresponds to the <code>id</code> property of the svg elements in the d3 selection.</p>
  
  <p>I'm doing the data-join like this:</p>
  
  <pre><code>mySelection.data(
    [
      {"name": "county1"},
      {"name": "county2"},
      {"name": "county3"}
    ],                 
    function (datum, index) {
      if (this.getAttribute("id") === datum["name"]) {
        return datum;
    });
  </code></pre>
  
  <p>However when I run it I get the error <code>Uncaught TypeError: Cannot read property 'name' of undefined</code>.</p>
  
  <p>I've tried stepping through the code with a debugger, and it looks to me like the problem is that when d3 calls my key function, the <code>datum</code> argument is empty. So I can only assume it doesn't like like the format of the data array.</p>
  
  <p>I've tried reading the documentation on the data function <a href="https://github.com/mbostock/d3/wiki/Selections#data" rel="nofollow">here</a>, unfortunately it isn't very clear about what format the function expects for its first argument besides that it should be an "array of data".</p>
  
  <p>Can you help me work out why my data bind isn't working?</p>
  
  <p>Here is a jsFiddle using my actual data: <a href="http://jsfiddle.net/Racheet/GG3d5/" rel="nofollow">http://jsfiddle.net/Racheet/GG3d5/</a></p>