[Solved]-D3.js: plot dots on the existing line in a multiseries line chart with long formatted data-d3.js

You'll need to make a few changes to get this to work:

1. Make sure your class names are consistent: Change cities.selectAll(".dot") to cities.selectAll(".dualLineChart-dot1") to match with the class attr you assign a few lines later
2. The y-accessor is d.temp, rather than d.values, so you should have .attr("cy", function(d) { return y(d.temp); }) to get the y-value
3. Most importantly, you should change the way you get the data for the points. Because the cities variable already is an array of data (split up by city), you just need to access it for your points using .data(function(d) { return d.values; }), instead of using .data(data, function(d) { return d.values; })

Here's the working code:

cities.selectAll(".dualLineChart-dot1")   //adding dots
    .data(function(d) { return d.values; })
    .enter().append("circle")
    .attr("class","dualLineChart-dot1")
    .attr("cx", function(d) { return x(d.date); })
    .attr("cy", function(d) { return y(d.temp); })
    .attr("r", 3.5)
    .on("mouseover", function(d){ 
        d3.select(this).style("fill", "blue");
    })
    .on("mouseout", function(){
        d3.select(this).style("fill", "white");
    });