title: D3.js: plot dots on the existing line in a multiseries line chart with long formatted data
body: <p>I have used the chart example as given here:
  <a href="http://bl.ocks.org/natemiller/20f9bd99d1795e3a0b1c" rel="nofollow">http://bl.ocks.org/natemiller/20f9bd99d1795e3a0b1c</a></p>
  
  <p>However, when trying to plot the data points over the individual lines, it doesnt show up. The code is given here:</p>
  
  <pre><code>var cities = svg.selectAll(".city")
          .data(data, function(d) { return d.key; })
      .enter().append("g")
          .attr("class", "city");
  
  cities.append("path")   //adding paths
    .attr("class", "line")
    .attr("d", function(d) { return line(d.values); })
    .style("stroke", function(d) { return color(d.key); });
  
  cities.selectAll(".dot")   //adding dots
          .data(data, function(d) { return d.key; })
      .enter().append("circle")
          .attr("class","dualLineChart-dot1")
          .attr("cx", function(d) { return x(d.date); })
          .attr("cy", function(d) { return y(d.values); })
          .attr("r", 3.5)
          .on("mouseover", function(d){ 
              d3.select(this).style("fill", "blue");
          })
          .on("mouseout", function(){
              d3.select(this).style("fill", "white");
          });    
  </code></pre>
  
  <p>the CSS part is as follows:</p>
  
  <pre><code>.line {
       fill: none;
       stroke-width: 1.5px;
   }
  
  .dot {
       fill: white;
       stroke: steelblue;
       stroke-width: 1.5px;
  }
  </code></pre>