title: Drawing Paths Between Circles
body: <p>I have 5 different circle contained within separate <code>g</code> elements in my D3.js application - they are laid out horizontally (all with the same <code>y</code> position)</p>
  
  <pre><code>var vis = d3.select("body).append("svg:svg")
  
  var node = vis.selectAll("g.node")
         .data(nodes);
  
  var nodeEnter = node.enter().append("svg:g")
        .attr("class", "node")
        .attr("transform", function(d,i){
           return "translate(" + (i * 200) + ",0)";
        });
  
  nodeEnter.append("svg:circle")
        .attr("r", 7)
        .style("fill", "green")
        .style("stroke", "green")
        })
  </code></pre>
  
  <p>I want to draw a path between all circles starting from the first node to the last, here's what I have so far</p>
  
  <pre><code>var lineFunction = d3.svg.line()
       .x(function(d) { return d.x; })
       .y(function(d) { return d.y; })
       .interpolate("linear");
  
  vis.selectAll(".link")
       .data(nodes.children)
       .enter().append("path")
       .attr("class", "link")
       .attr("d", lineFunction(nodes));
  </code></pre>
  
  <p>However my lineFunction() fails as the nodes have no x or y attributes. Do I need to define these manually or am I over-complicating this? </p>
  
  <p>Note the number of objects will grow and I'll need to draw paths between them regardless of the number.</p>