如何在變量中創建多個時間序列的D3圖（即不使用d3.tsv（））？

Question

我正在查看以下D3 time series graph example（original source），它使用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。請注意，我假設您的數據點已按日期排序（如您的示例中所示），並且每個日期都有三個數據點。