Adding circles to multiline graph with d3.js

Question

so I'm trying to add circles to each datapoint on this graph:

http://bl.ocks.org/mbostock/3884955

Any idea on how to do this? Thanks.

Here is what I tried for now:

var circles = focus.selectAll("g") 
    .data(values) 
    .enter() 
    .append("g"); 

circles.append("circle") 
    .attr("cx", function (d) { return d.date; }) 
    .attr("cy", function (d) { return d.temperature; }) 
    .attr("r", function (d) { return 4; });

Answer 1

You can append circles for each point of a given city:

city.append("g").selectAll("circle")
  .data(function(d){return d.values})
  .enter()
  .append("circle")
  .attr("r", 2)
  .attr("cx", function(dd){return x(dd.date)})
  .attr("cy", function(dd){return y(dd.temperature)})
  .attr("fill", "none")
  .attr("stroke", "black")

Result: http://bl.ocks.org/ChrisJamesC/5896521/943f325deacb4a533e086d56478c1e76b6c6b4bd

By the way, this method does not work with the basis interpolation as points seem to be far from the line. You might have to do more work if you need the interpolation but I doubt that as highlighting each points of the curve certainly means that you want to have their exact position.

EDIT: In order to have a the circle to be the same color as the line, you need to access the data of the parentNode:

.attr("stroke", function(d){return color(this.parentNode.__data__.name)})

New result: http://bl.ocks.org/ChrisJamesC/5896521/83d7c5c04f7d031d3c71b4d6fd5b5193366d9fed