javascript - d3 rects inside rect, accessing and drawing nested elements -

i create rect contains several rects. output 1 row (without attributes besides class):

<g class="rects">   <rect class="rect"></rect>   <g class="rectchildren">     <rect class="rectchild1"></rect>     <rect class="rectchild2"></rect>     <rect class="rectchild3"></rect>   </g> </g> 

however, not know how access , draw nested foreach loop in d3 (see code comment).

json:

[   {"name":"a", "rect":{"x":0, "width":600}, "rectchildren":[{"x":0, "width":200}, {"x":200, "width":200}, {"x":400, "width":200}]},   {"name":"b", "rect":{"x":0, "width":1200}, "rectchildren":[{"x":0, "width":400}, {"x":400, "width":400}, {"x":800, "width":400}]} ] 

code:

var data; d3.json("flare.json", function(error, flare) {     if (error) throw error;     data = flare; }); var nodes = tree.nodes(data); var barheight = 40;  // update nodes… var rects = svg.selectall("g.rects")     .data(nodes, function(d) { return d.id || (d.id = ++i); });  //first group var rectsenter = rects.enter().append("g")     .attr("class", "rects");  rectsenter     .append("rect")     .attr("class", "rect")     .attr("y", function(d, i) { return * (10 + barheight); })     .attr("height", barheight)     .attr("width", function(d) { return d.width; })     .style("fill", "blue");  var rectchildren = rectsenter     //here need like:     //foreach(r in d.rectchildren)     //do     .append("rect")     .attr("class", "rectchild")     .attr("y", function(d, i) { return * barheight + 10; })     .attr("height", barheight)     .attr("width", function(d) { return d.width; })     .style("fill", "green");