title: Create points on a D3 multiline graph
body: <p>I'm trying to add points to a line graph using d3 in this example:
  <a href="http://bl.ocks.org/mbostock/3884955" rel="nofollow noreferrer">http://bl.ocks.org/mbostock/3884955</a></p>
  
  <p>I was also trying to follow <a href="https://stackoverflow.com/questions/17262028/adding-point-and-value-to-line-chart-how-to-color-the-point-like-the-line?rq=1">this post</a></p>
  
  <p>How do you get the points to look like this picture from the documentation?
  <a href="http://github.com/mbostock/d3/wiki/line.png" rel="nofollow noreferrer">http://github.com/mbostock/d3/wiki/line.png</a></p>
  
  <p>The stroke of the circle should match the line color.</p>
  
  <pre><code>var color = d3.scale.category10();
  </code></pre>
  
  <p><br/></p>
  
  <pre><code>  d3.csv("data.csv", function(error, data) {
    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
  
    data.forEach(function(d) {
      d.date = parseDate(d.date);
    });
  
    var ranks = color.domain().map(function(name) {
      return {
        name: name,
        values: data.map(function(d) {
          return {date: d.date, ranking: +d[name]};
        })
      };
    });
  </code></pre>
  
  <p><br /><br /></p>
  
  <pre><code>  var rank = svg.selectAll(".rank")
        .data(ranks)
      .enter().append("g")
        .attr("class", "rank");
      rank.append("path")
        .attr("class", "line")
        .attr("d", function(d) { return line(d.values); })
        .style("stroke", function(d) { return color(d.name); });
  </code></pre>
  
  <p><br/><br/></p>
  
  <pre><code>var point = rank.append("g")
  .attr("class", "line-point");
  
  point.selectAll('circle')
  .data(function(d){ return d.values})
  .enter().append('circle')
  .attr("cx", function(d) { return x(d.date) })
  .attr("cy", function(d) { return y(d.ranking) })
  .attr("r", 3.5)
  .style("fill", "white")
  .style("stroke", function(d) { return color(d.name); });
  </code></pre>