score:9

Accepted answer

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


Related Query