title: D3.js: Appending different amount of elements to group?
body: <p>I'm trying to create a graph representation but I'm not sure how to organize my data.</p>
  
  <p>I currently have all the data bound to a group and have drawn the nodes.</p>
  
  <p>The data includes the list of edges but I'm not sure how to draw them as each node has a different number of edges.</p>
  
  <pre><code>var group = svg.selectAll("g").data(dataset).enter().append("g);
  
  //this works
  
  group.append("circle")
       .attr(...).attr(...).attr(...);
  
  //what to do here? when I call group, it will loop through each node ONCE and append a path
  //but I need it to append edges.length paths for each pass
  
  group.append("path")
       .attr("d", function(d,i){
  
          //example of 1 line
          lineSeg = [];
          lineSeg.push({"x":d.x ,"y":d.y});
          lineSeg.push({"x":d.edges[1].x ,"y":d.edges[1].y});
  
          return line(lineSeg);
  
       });
  </code></pre>
  
  <p>edit:</p>
  
  <pre><code>//just to add dom structure, my goal is for it to be:
  
  g:
     circle
     path1
     path2
  
  g:
     circle
     path1
     path2
     path3
  
  g:
     circle
     path1
  
  etc...
  </code></pre>
  
  <p>Lars linked to the relevant tutorial page. The key for me was the nested data joins</p>
  
  <pre><code>var td = d3.selectAll("tbody tr")
  .data(matrix)
  .selectAll("td")
  .data(function(d, i) { return d; }); // d is matrix[i]
  </code></pre>