title: how to show properties of a featureCollection in d3 (using the mouse)
body: <p>After displaying my map with D3, I need to place customer locations on it. No problems doing that but when the user clicks on on of my customer locations I need to display data about the location that is currently held in the properties member. Right now, when I console.log() the selected customer location, I get the entire features data and not the single feature data that the user selected. Here is my customer location data:</p>
  
  <pre><code>var customerListData =
  {
      "type":"FeatureCollection",
      "features":[
      {
          "geometry":{"type": "Point", "coordinates": [-77.4918710, 38.1991360]},
          "properties": {"NUM":0,"NAME":"DFA54635","formattedAddress":"4503 Cornwall     Court, Fredericksburg, VA 22408, USA"}
      },
      {
          "geometry":{"type": "Point", "coordinates": [-81.0974798, 36.9448153]},
          "properties": {"NUM":1,"NAME":"DFA54644","formattedAddress":"475 North 22nd Street, Wytheville, VA 24382, USA"}
      }
     ...
  </code></pre>
  
  <p>and here is how I am displaying this data</p>
  
  <pre><code>// paint the customer locations
  svg.selectAll(".cities").data([customerListData])
      .enter().append("path")
  .attr("class","cities")
  .attr("d", path)
  .on("click", function(d) 
       {
     console.log(d);
       }) 
  .append("title").text(function(d) 
  { 
      console.log(d);
  });
  </code></pre>
  
  <p>The console log in both cases above displays the entire feature collection:</p>
  
  <pre><code>Object { type="FeatureCollection", features=[105]}
  </code></pre>
  
  <p>So...How can I get the exact feature using the mouse as input?</p>