javascript - 在折线图中的多条线上绘制点

Question

我正在尝试在线条上绘制小圆圈以表示折线图中的数据点，使用以下代码:

// Add the scatterplot
  g.selectAll("dot")
    .data(newdata[0].values)
    .enter().append("circle")
    .attr("r", 5)
    .attr("cx", function(d) {
      return x(d.date);
    })
    .attr("cy", function(d) {
      return y(d.value);
    })            
    //.attr("stroke", "blue")
    //.attr("stroke-width", 2)
    //.attr("fill", "none")
    .on("mouseover", function(d) {
      div.transition()
        .duration(200)
        .style("opacity", .9);
      div.html(formatTime(d.date) + "<br/>" + d.value)
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY - 28) + "px");
    })
    .on("mouseout", function(d) {
      div.transition()
        .duration(500)
        .style("opacity", 0);
    });

但问题是，我一次只能传递一个元素的值:.data(newdata[0]).values)。这只会在一条线上绘制点。我可以将整个代码放入循环中并使用计数器 i 而不是 0。但这将是一个非常糟糕的解决方案。以下是我的数据结构:

[{
  "id": "primary",
  "values": [{
    "date": "2011-03-31T18:30:00.000Z",
    "value": 58.13
  }, {
    "date": "2011-04-30T18:30:00.000Z",
    "value": 53.98
  }]
}, {
  "id": "secondary",
  "values": [{
    "date": "2011-03-31T18:30:00.000Z",
    "value": 28.13
  }, {
    "date": "2011-04-30T18:30:00.000Z",
    "value": 35.13
  }]
}];

Here is the JSFiddle.

请建议怎么做! :)

Answer 1

如何先使用 reduce 展平数据？ :

var values = newdata.reduce(function(arr, d){
     return arr.concat(d.values);
}, []);

这将为您提供构造点所需的所有对象的数组:

[{"date":"2011-03-31T18:30:00.000Z","value":58.13},
 {"date":"2011-04-30T18:30:00.000Z","value":53.98},
 {"date":"2011-03-31T18:30:00.000Z","value":28.13},
 {"date":"2011-04-30T18:30:00.000Z","value":35.13}]

当然，只需绑定(bind)这些值即可创建您所有的圈子:

g.selectAll("dot")
 .data(values)
 ... // etc