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}]

然后当然只需绑定这些值即可创建所有圈子：

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

在折线图中的多行上绘制点

1 个答案: