title: D3 access nested data
body: <p>I have some nested data in this format:</p>
  
  <pre><code>[{"key":"PFOA",
    "values":[
       {"sampleDate":"2016-0126T05:00:00.000Z",
        "shortName":"PFOA",
        "pfcLevel":0,
        "chemID":1},
       {"sampleDate":"2016-01-19T05:00:00.000Z",
        "shortName":"PFOA",
        "pfcLevel":0,
        "chemID":1},
       {"sampleDate":"2016-01-12T05:00:00.000Z",
        "shortName":"PFOA",
        "pfcLevel":0,
        "chemID":1}
     ],
     "visible":0}
  ]
  </code></pre>
  
  <p>I'm trying to use this data to add circles to a multi-line graph.  I can do this if I use the raw, non-nested data directly from the database, but that is causing other issues.  I'd rather use the same nested data for the lines and the circles if possible.  The nest function and the circle code is below:</p>
  
  <pre><code>var nested_data = d3.nest()
          .key(function(d) { return d.shortName; })
          .entries(data);
  
  var circles = svg.selectAll(".circle")
          .data(nested_data) 
        .enter().append("g")
          .attr("class", "circle");
  
  circles.append("circle")
          .attr("stroke", function(d) { return color(d.key); })
          .attr("fill", "white")
          .attr("cx", function(d, i) { return x(d.values['sampleDate']) })
          .attr("cy", function(d, i) { return y(d.values['pfcLevel']) })
          .attr("r", 2);
  </code></pre>
  
  <p>I've tried different things like <code>d.values[sampleDate]</code> or <code>.data(nested_data.values)</code> but I am getting undefined errors on all of them.</p>
  
  <p>Thanks in advance.</p>