d3.js: Access data nested 2 level down
<p>Data structure:</p>

<pre><code>var data = [ 
   {name: "male",
   values: [
     { count: 12345,
       date: Date 2015-xxx,
       name: "male" },
     {...}
   ]
  },
  {name: "female",
   values: [
     { count: 6789,
       date: Date 2015-xxx,
       name: "female" },
     {...}
   ]
  }
]
</code></pre>

<p>The values that I want to access are data[a].values[b].count</p>

<p>The values are used to draw circles for my plot</p>

<p>code for circle plot:</p>

<pre><code>focus.selectAll(".dot")
    .data(data)
    .enter().append("circle")
    .attr("class", "dot")
    .attr("cx", function(d,i) { return x(d.values[i].date); })
    .attr("cy", function(d,i) { return y(d.values[i].count); })
    .attr("r", 4)
    .style("fill", function(d,i) { return color(d.values[i].name); })
</code></pre>

<p>The problem is that <code>i = 1</code> because of its position in the object.</p>

<p>What I want to do is to loop through all the <code>objects</code> under <code>values</code>. How can I do that? </p>

<p>Edit: I wish to learn how to do it without altering the data, to improve on my skills.</p>

<p>Thanks.</p>