时间戳

首页 > 解决方案 > 在 Javascript 中读取带有多个表的 CSV

javascript - 在 Javascript 中读取带有多个表的 CSV

问题描述

我正在尝试从包含多个表的 CSV 中读取数据。它如下所示，我希望分别拥有表 1、表 2 和表 3。

TABLE1;START DATE(Y/M/D);START TIME;END DATE(Y/M/D);FINISHED;NUML;NUMD
1;2018/07/25;08:36;2018/07/26;true;3;2
2;2018/07/26;08:37;2018/07/27;false;2;0


TABLE2;CYCLE;DATE(Y/M/D);TIME;ACTIVITY;TYPE;DURATION
1;1;2018/07/25;08:44;3;d;2:41:20
2;1;2018/07/25;11:38;0;d;20:58:15
3;2;2018/07/26;08:45;3;d;2:41:20
4;2;2018/07/26;11:39;0;d;7:23:00


TABLE3;CYCLE;DATE(Y/M/D);TIME;QUANTITY;TYPE
1;1;2018/07/25;12:12;100;Water

目前我正在尝试阅读 CSV

d3.dsv(';', 'testData.csv').then(data => {console.log(csvCycles); });

这会将其读取为一个 CSV，因此我尝试使用用于检查标题的 for 循环手动将其分开，但随后我得到的只是没有用的 'TABLE1':'TABLE2' 之类的东西。

有谁知道我该怎么做我想做的事？

编辑：这是我使用 for 循环的代码

`

d3.dsv(';', 'testData.csv').then(data => {
    let csvCycles = [];
    for (let index = 0; index < data.length; index++) {
        if (data[index]['TABLE1'] != 'TABLE2') {
            csvCycles.push(data[index])
        }else{
            break;
        }
    }
    console.log(csvCycles);
});

`

标签： javascriptcsvd3.js

解决方案

这是一个工作示例，不确定您使用的是哪个版本的 D3，但这可以通过使用d3-dsv解析 CSV 文件和d3-fetch获取文本来实现， 

// d3.text('multi.csv').then((data) => {
    var data = `TABLE1;START DATE(Y/M/D);START TIME;END DATE(Y/M/D);FINISHED;NUML;NUMD
1;2018/07/25;08:36;2018/07/26;true;3;2
2;2018/07/26;08:37;2018/07/27;false;2;0


TABLE2;CYCLE;DATE(Y/M/D);TIME;ACTIVITY;TYPE;DURATION
1;1;2018/07/25;08:44;3;d;2:41:20
2;1;2018/07/25;11:38;0;d;20:58:15
3;2;2018/07/26;08:45;3;d;2:41:20
4;2;2018/07/26;11:39;0;d;7:23:00


TABLE3;CYCLE;DATE(Y/M/D);TIME;QUANTITY;TYPE
1;1;2018/07/25;12:12;100;Water`;

    parsedText = data.split("\n\n");
    parsedText.forEach(element => {
      console.log(d3.csvParse(element, ""));
    });
  // });
<html>
<head>
<title> Learning D3 Js</title>
</head>
<body>
<div id = "chart"></div>
<div id = "graphic"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.js" charset="utf-8"> </script>
<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<script src="https://d3js.org/d3-fetch.v1.min.js"></script>
</body>
</html>

请注意，我注释掉了 fetch 和 used 数据变量。

推荐阅读