title: d3 nested selection : how to access array data
body: <p>I have had a look at many similar posts here about nested selections, but I wasn't successful transferring the problem to my case.
  I hope it's ok to ask this as a separate question.</p>
  
  <p>I have:
  nested json structure that represents a phylogenetic tree (with species)</p>
  
  <pre><code>    {
     "name" : "Sauria",
     "children" : [
        {
           "domains" : [
              {
                 "name" : "BRCA2",
                 "domain_start" : 100,
                 "domain_stop" : 240
              }
           ],
           "common_name" : "NaN",
           "seq_length" : 200,
           "duplication" : "N",
           "name" : "ENSMGAP00000010132",
           "class" : "leaf",
           "bootstrap" : "NaN",
           "taxon" : "Meleagris_gallopavo"
        },
        {
           "domains" : [
              {
                 "name" : "BRCA2",
                 "domain_start" : 100,
                 "domain_stop" : 240
              }
           ],
           "common_name" : "NaN",
           "seq_length" : 200,
           "duplication" : "N",
           "name" : "ENSACAP00000006049",
           "class" : "leaf",
           "bootstrap" : "NaN",
           "taxon" : "Anolis_carolinensis"
        }
      ],
     "bootstrap" : "15",
     "taxon" : null,
     "common_name" : "NaN"
  </code></pre>
  
  <p>To get all nodes and bind my data I do</p>
  
  <pre><code> var node = d3.select("#tree svg").selectAll("g.node").data(nodes, function(d) { return d.id || (d.id = ++i); });
  </code></pre>
  
  <p>Then I add groups to each node using</p>
  
  <pre><code> var nodeEnter = node.enter().append("svg:g")
          .attr("class", "node")
          .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; });
  </code></pre>
  
  <p>I draw a rectangle for each leaf like this</p>
  
  <pre><code> var div3 = nodeEnter.append("rect")
              .attr("x", 192)
              .attr("y", 160)
               .attr("width", function(d){return d.children ? "":"10";})
               .attr("height", function(d){
                     return d.children ? "": domainOnlyScale(d.seq_length);
              })
             .attr("transform", function(d){return d.children ? "":"rotate(-90 100 100)";})
             .attr("fill", function(d){return d.children ? "":"grey";});
  </code></pre>
  
  <p>Now the tricky thing. I would like to draw something onto the rectangle using the data in "domains" that each leaf has, so this part</p>
  
  <pre><code>   "domains" : [
          {
             "name" : "BRCA2",
             "domain_start" : 100,
             "domain_stop" : 240
          }
       ],
  </code></pre>
  
  <p>I simply don't know how to iterate over all leaves and over each element of the domains array (note that this array can have several entries). So when I try to use "each"</p>
  
  <pre><code> div3.each(function(d) {    
          [d.domains].each(function(dom){
                      d3.select(this)
                     .append("rect")
                     .attr("x", 230)
                     .attr("y", 175)
                     .attr("rx", 5)
                     .attr("ry", 5)
                     .attr("width", function(d){return "12";})
                     .attr("height", function(d){
                          console.log("here we go again: "+d.name+" has length: "+(d.domains.seq_stop - d.domains.seq_start));
                             //var randomnumber=Math.floor(Math.random()*11)
                             return dom.domain_start;
                      })
                      .attr("fill", function(d){return d.children ? "":"red";})
         })
         });
  </code></pre>
  
  <p>d3 tells me that "Object [object Object] has no method 'each' ", but I though d.domains was an array.</p>
  
  <p>Can you help me to access this nested "domain" information?</p>
  
  <p>Thanks a lot!</p>