title: d3: A sub array of objects
body: <p>I have the following structure:</p>
  
  <pre><code>[
      { 'length': 10, attributes: [1,2,3] },
      { 'length': 7, attributes: [1,3,4,5] },
      { 'length': 12, attributes: [3,5,7,9,10] },
  ]
  
   and I am doing the following:
  
  
  x = d3.scale.linear().domain([0, maxHeight]).range([50, w]),
  y = d3.scale.linear().domain([0, maxHeight]).range([h, 20]);
  z = d3.scale.linear().domain([0, maxHeight]).range([0, h - 20]);
  
  var chart = svg.selectAll("g.chart")
      .data(items)
      .enter()
      .append("svg:g")
      .attr("class", "chart");
  
  chart.append("svg:rect")
      .attr("fill", 'darkblue')
      .attr("class", 'data')
      .attr("x", function(d, i) { return x(i+1); })
      .attr("y", function(d, i) { return bottom - z(d['length']) + 15 })
      .attr("width", 4)
      .attr("height", function(d, i)  { return z(d['length']) - z(d['min']); })
  </code></pre>
  
  <p>What I would like to do is add circles on each of these rectangles which corresponds to the attributes in my structure.  Basically, (for one 'item'}, I should see something like this:</p>
  
  <pre><code>&lt;g class="chart"&gt;
      &lt;rect fill="darkblue" class="data" x="626.1538461538462" y="15" width="6" height="530"&gt;&lt;/rect&gt;
      &lt;circle cx="626.1538461538462" cy="(y1)" r="5" style="fill: #ffff00; stroke: #808080;"&gt;&lt;/circle&gt;
      &lt;circle cx="626.1538461538462" cy="(y2)" r="5" style="fill: #ffff00; stroke: #808080;"&gt;&lt;/circle&gt;
      &lt;circle cx="626.1538461538462" cy="(y3)" r="5" style="fill: #ffff00; stroke: #808080;"&gt;&lt;/circle&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>The only thing I can think of is looping over the attributes and adding them element by element:</p>
  
  <pre><code>for (z=0; z&lt; 3; ++z)
  {
      chart.append("svg:circle")
      .data(items[z]['attributes'])
      .style("fill", 'yellow')
      .style("stroke", "gray")
      .attr("cx", function(d, i) { return x(i+1); })
      .attr("cy", function(d, i) 
      { 
          console.log(d); 
          return bottom - 15;
      })
      .attr("r", 5);
  }
  </code></pre>
  
  <p>Is there a better way to do this?</p>