d3.js - 在多折线图上创建散点

Question

所以我正在使用基于此的代码..

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

本质上，我想要做的是在每个数据点上添加一个圆圈。看到我不知道从哪里开始，任何帮助将不胜感激。

到目前为止，这是我的代码：它在我使用单行时有效。

var circlegroup = focus.append("g")
circlegroup.attr("clip-path", "url(#clip)")
circlegroup.selectAll('.dot')
    .data(data)
    .enter().append("circle")
    .attr('class', 'dot')
    .attr("cx",function(d){ return x(d.date);})
    .attr("cy", function(d){ return y(d.price);})
    .attr("r", function(d){ return 4;})
    .on('mouseover', function(d){ d3.select(this).attr('r', 8)})
    .on('mouseout', function(d){ d3.select(this).attr('r', 4)});  

Answer 1

为此，您需要嵌套选择。假设这data是一个二维数组，你会做这样的事情。

var groups = svg.selectAll("g").data(data).enter().append("g");
groups.data(function(d) { return d; })
      .enter()
      .append("circle")
      // set attributes