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

里沙卜

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

// 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)这只会在一条线上绘制点。我可以将整个代码放入循环中,并使用counteri而不是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
  }]
}];

这是JSFiddle。

请提出建议!:)

mdml

首先使用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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

热门标签

归档