如何從d3.js嵌套數組中正確獲取數據

Question

我目前正在嘗試可視化來自較大數組的一些數據。 我的結果是我想要一個多折線圖。

我的數組采用CSV格式，以便D3.js更好地處理。

我的數據看起來像這樣：

類別，日期，頻率<-列標題
購物23/7 / 90,9
約會，23/3 / 96,3

我希望能夠分別處理多線圖的每個類別，因此決定將數據映射到下面的另一個數組中：

CONSOLE.LOG（DataNest）

我現在的問題是我不知道如何檢索信息來創建我的圖表線？

我的代碼在這里：

var dataNest = d3.nest()
.key(function(d) {return d.category;})
.entries(data_out);

dataNest.forEach(function(d,i) {

var line = d3.line() 
.x(d3.values(dataNest).map(function(d) { return d.date; }).filter(function(key) { return key !== "date"; }))
.y(d3.values(dataNest).map(function(d) { return d.frequency; }).filter(function(key) { return key !== "frequency"; }))
;

  chartGroup.append('path').attr('d',line(d));


          });

Answer 1

我的理解是，如果您使用的是CSV或TSV文件，則數據需要采用以下格式：

category,date,frequency
shopping,23/7/90,9
shopping,28/7/90,9
shopping,27/7/90,9
shopping,23/8/90,9
shopping,23/9/90,9

與此相反：

category,date,frequency shopping,23/7/90,9
category,date,frequency shopping,28/7/90,9
category,date,frequency shopping,27/7/90,9
category,date,frequency shopping,23/8/90,9
category,date,frequency shopping,23/9/90,9

格式正確后，您可以在將CSV導入為d.category，d.date等之后引用數據。

這是使用TSV的出色的多系列折線圖的一個很好的示例： https : //bl.ocks.org/mbostock/3884955