javascript - 如何在 d3.js 中创建多折线图，其中每条线的数据都是从单独的 csv 中提取的？

我的目标是使用 d3.js 创建一个简单的多折线图，本质上类似于以下内容：

我发现了几个很好的例子，展示了如何在所有数据都在单个 CSV 中的情况下执行此操作。这些例子之一是这个：

不过，我有一个稍微模糊的用例要求。我的项目根目录中有一个名为“data”的目录，在这个文件夹中有任意数量的 csv。所以我的项目文件夹是这样的：

project_root/
    index.html
    data/
        csv1.csv
        abc2.csv
        meow.csv
            .
            .
            .
        woof.csv

这些 csv 中的每一个都有我想在图表上绘制的单行数据。每个 csv 还具有以下列：

str(representing a datetime)    int    float    int    string    float

我唯一关心制作图表的列是前两列，其中：

因此，从 csv 中的单行中获取前两列为我们提供了从单行到通过 d3.js 绘制的单个 (x,y) 坐标。单个 csv 为我们提供了一条线的所有 (X,Y) 坐标，以通过 d3.js 绘制。

我已经设法使用 python 和 matplotlib 做到这一点（草率地），但不能直接将它翻译成 d3，因为我对它很陌生。如果有帮助或有人好奇，这是我的 python 实现：

如果有人可以提供一些见解或简短的（希望如此）片段，可以在 d3.js 中完成这个图表任务，以获得一个可爱的 html 文档。

标签： javascriptpythoncsvd3.jsplot