javascript - 如何在变量中创建具有多个时间序列的 D3 图（即不使用 d3.tsv()）？

Question

我正在查看以下D3 时间序列图示例（原始来源），它用于d3.tsv()将不同的序列添加到图中。

假设我的数据格式如下：

var data1 = [{"date": "2011-07-16", "data1": 413.0}, {"date": "2011-07-17", "data1": 412.0}, ...]
var data2 = [{"date": "2011-07-16", "data2": 200.0}, {"date": "2011-07-17", "data2": 201.0}, ...]
var data3 = [{"date": "2011-07-16", "data3": 199.0}, {"date": "2011-07-17", "data3": 195.0}, ...]

如何修改此示例以使用我的数据？

Answer 1

一个简单的解决方案是将三个数据数组合并为一个数组，该数组与 d3.tsv 返回的对象格式相同。例如，不是在示例中调用 d3.tsv(...) ，而是首先合并您的三个数据数组，例如

// Create a merged list of data points
var data = [];
var i;
for (i = 0; i < data1.length; i++){
  data.push({date: data1[i].date, data1: data1[i].data1,
             data2: data2[i].data2, data3:    data3[i].data3, });
}

然后您可以data在脚本的其余部分以完全相同的方式使用。请注意，我假设您的数据点已经按日期排序（如您的示例中所示），并且每个日期都有三个数据点。