Question

我目前正在尝试从一个相当大的数组中可视化一些数据。我的结果是我想要一张多线图。

我的数组采用CSV格式，以便D3.js更好地处理。

我的数据看起来像这样：

类别，日期，频率＆lt; - 列标题
购物23/7 / 90,9
约会，23/3 / 96,3

我希望能够单独处理我的多线图的每个类别，所以决定将我的数据映射到另一个数组，如下所示：

我现在的问题是我不知道如何检索信息以创建我的图表线？

我的代码在这里：

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

如何从d3.js嵌套数组中正确获取数据

1 个答案: