使用d3.js将圆圈添加到多线图

所以我想在这个图上为每个数据点添加圆圈：

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

有关如何做到这一点的任何想法？谢谢.

这是我现在尝试的：

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; });

解决方法

您可以为给定城市的每个点添加圆圈：

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")

结果：http://bl.ocks.org/ChrisJamesC/5896521/943f325deacb4a533e086d56478c1e76b6c6b4bd

顺便说一句,这种方法不适用于基础插值,因为点似乎远离线.如果你需要插值,你可能需要做更多的工作,但我怀疑,因为突出曲线的每个点肯定意味着你想拥有它们的确切位置.

编辑：
为了使圆与行的颜色相同,您需要访问parentNode的数据：

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

新结果：http://bl.ocks.org/ChrisJamesC/5896521/83d7c5c04f7d031d3c71b4d6fd5b5193366d9fed