title: How to connect dots in D3 with a line?
body: <p>I've pulled out some data and after scaling, I draw a bunch of circles. This works just great.</p>
  
  <pre><code>var gSet = graph1.selectAll("g").data(data).enter().append("g");
  gSet.append("circle")
    .attr({ cx: posX, cy: posY, r: dotSize })
    .attr("class", "dataPoint");
  </code></pre>
  
  <p>Now, I'd like to connect the dots. Most examples I've seen are about bars, not lines so I've googled some more <a href="http://www.verisi.com/resources/d3-tutorial-basic-charts.htm#s2" rel="nofollow">line charts</a> and decided to use path element, like so.</p>
  
  <pre><code>var gSet = graph1.selectAll("g").data(data).enter().append("g");
  gSet.append("circle")
    .attr({ cx: posX, cy: posY, r: dotSize })
    .attr("class", "dataPoint");
  gSet.append("path")
    .attr("d", d3.svg.line().x(posX).y(posY))
    .attr({ "stroke": "yellow", "stroke-width": "1" });
  </code></pre>
  
  <p>Nothing new appears on the screen and due to ignorance, I'm not sure where to poke to see what went wrong.</p>
  
  <ol>
  <li>Should I be using <em>path</em> (or is <em>line</em>, <em>polyline</em> etc. a better choice)?</li>
  <li>Should I be working with the <em>d</em> attribute or is there a more suited one?</li>
  <li>Should I be applying the <em>d3.svg.line()</em> function or is there a smoother way?</li>
  </ol>