D3线图,任意多行(和特定数据格式)

Question

我在使用D3时遇到了一些麻烦,而且我的机智已经结束了.基本上我有一个任意多行的时间序列图,并且为了方便起见,源数据不能被修改(但它可以在客户端操作).

因此格式化数据(任意多个标签):

object = [
{
  "_id": "2012-08-01T05:00:00",
  "value": {
    "label1": 1.1208746110529344,
    "label2": 0.00977592175310571
  }
},
{
  "_id": "2012-08-15T05:00:00",
  "value": {
    "label1": 0.7218920737863477,
    "label2": 0.6250727456677252
  },
  ....

我尝试过类似的东西:

var vis = d3.select.(element)
    .append("svg:svg")
    .attr("width", width)
    .attr("height", height)
    .append("svg:g");

var line = d3.svg.line()
    .x(function(data) {return x(new Date(data._id));})
    .y(function(data) {return y(data.value);});


vis.append("svg:path")
    .attr("d", line(object))
    .attr("stroke", "black");

这似乎无法通过y访问器访问正确的值,因为我得到"错误:解析问题"和大量"NaNL3.384615384615385,NaNL6.76923076923077,NaNL10.153846153846155".但是,如果我通过以下方式对标签值进行硬编码:

.y(function(data) {return y(data.value.label1);});

它工作得很好,但只适用于一行.有人可以提供帮助吗？

Answer 1

我首先将数据转换为相同格式的并行数组:

var series = ["label1", "label2"].map(function(name) {
  return data.map(function(d) {
    return {date: new Date(d._id), value: d.value[name]};
  });
});

(您可以使用d3.keys自动计算系列名称,而不是像上面那样对它们进行硬编码.)现在series是一个数组数组.单个系列(例如label1)将如下所示:

{date: new Date(2012, 7, 1, 5, 0, 0), value: 1.1208746110529344},
{date: new Date(2012, 7, 15, 5, 0, 0), value: 0.7218920737863477},
…

由于它们具有相同的格式,因此您可以对所有系列使用相同的行生成器:

var line = d3.svg.line()
    .x(function(d) {return x(d.date); })
    .y(function(d) {return y(d.value); });

同样,嵌套数组非常适合数据连接以创建所需的路径元素:

svg.selectAll(".line")
    .data(series)
  .enter().append("path")
    .attr("class", "line")
    .attr("d", line);