使用分号分隔符且没有标题来获取和处理数据

我在理解 D3.JS 获取文档时遇到了一些困难：

我的数据源是：

20180601 000000;1.168200;1.168240;1.168140;1.168230;0;
20180601 000100;1.168220;1.168230;1.168190;1.168190;0;
20180601 000200;1.168180;1.168180;1.168080;1.168120;0;
20180601 000300;1.168130;1.168160;1.168130;1.168140;0;

其中格式为：

%Y%m%d %H%M%S;number1;number2;number3;number4;number5;

我的困难是：

1. 向数据添加标头
2. 使用分号而不是逗号作为分隔符

1）据我所知，我需要读取文件而不解析它，然后将文本字符串连接到文件的开头，最后解析数据。

d3.text(data.csv, function(error, textString){});

var headers = ["date","time","data1","data2"].join("\t");

d3.csv.parse(headers + textString);

2）我可以使用dsv格式并将分隔符设置为分号吗？

d3.dsv(";", "text/plain")

我最终得到的粗略代码是：

var time_parse = d3.timeParse( '%Y%m%d %H%M%S');
var time_format = d3.timeFormat('%H%M');

d3.text(data.csv, function(error, textString){

var headers = ["time;number1;number2;number3;number4;number5;"].join("\t")

d3.csv.parse(headers + textString)

d3.dsv(";", "text/plain")

data.forEach(function(e,i){
    data[i].time = time_parse(e.date);
})

})

理想情况下，我希望记录时的数据如下所示：

Time, Number1, Number2, Number3, Number4, Number5
00:00, 1.168200, 1.168240, 1.168140, 1.168230, 0
etc

我的想法有什么缺陷，有人可以就如何解决我的问题和未来类似的问题提供建议吗？

注意：我是 Javascript 和 d3 的新手，虽然我已经能够毫无问题地完成大部分涉及绘制 svgs、创建轴和比例、过渡等的文档，但我很难真正从真实的数据中获取数据来源（例如互联网）并将其处理成可行的东西。请严厉批评我所说的一切并提供建议，我想学习。

目前尚不清楚您使用的是哪个版本的 d3，您引用了 fetch API，但您拥有的某些代码看起来像问题代码中的 d3v3 和 v4（这可能是问题），它们不使用 fetch API。无论如何，我会浏览 v5，但也会浏览版本 4 和 3。

在所有这些中，根据您拥有的代码块，您的想法看起来非常接近。我们需要：

• 我们在 dsv 中以文本形式读取，
• 添加标题（带有行尾\n),
• 并通过 dsv 格式函数运行所有内容，该函数将使用;作为分隔符。

不需要d3.csv.parse尽管如您的问题代码块中所示

为了简单起见，我在下面的所有内容中删除了日期格式（哎呀，把它留在了 v5 演示中）.

由于 d3v5 中使用了 d3-fetch 模块，这种方法与更密切相关的 d3v3/v4 有点不同（密切相关是因为它们都使用 d3-request 模块，否则有相当大的差异）。

d3-获取：d3v5

对于 d3v5，使用 d3-fetch 模块，该过程可能如下所示：

var dsv = d3.dsvFormat(";");
var headers = ["time;number1;number2;number3;number4;number5;\n"]

d3.text("dsv.dsv").then(function(text) {
    var data = dsv.parse(headers+text);

    console.log(data);  
    console.log(data.columns);

})

Example https://bl.ocks.org/Andrew-Reid/f66c7bd795f156f1372cb436175b9b40

d3-请求：d3v4

d3v4 对此有更多的灵活性。

如果我们查看 API 文档，我们会发现 d3.csv 相当于：

d3.request(url)
    .mimeType("text/csv")
    .response(function(xhr) { return d3.csvParse(xhr.responseText, row); });

(docs https://github.com/d3/d3-request#csv)

因此，如果我们使用 d3.dsvFormat 创建一种新格式，我们可以通过该格式运行内容并获取数据，我们还可以在此过程中添加标头，所有这些都只需一步：

var dsv = d3.dsvFormat(";");
var headers = ["time;number1;number2;number3;number4;number5;\n"]

d3.request("dsv.dsv")
  .mimeType("text/plain")
  .response(function(data) { return dsv.parse(headers + data.response) })
  .get(function(data) {
    // use data here:   
    console.log(data);  
    console.log(data.columns);
  }); 

Example https://bl.ocks.org/Andrew-Reid/dabd82fd5c2e5f2527399cfef6c5971c

这可能是更非典型的方法，因此我们可以模仿我在上面的 v5 中所做的方式：

var psv = d3.dsvFormat(";");
var headers = ["time;number1;number2;number3;number4;number5;\n"]

d3.text("dsv.dsv", function(error,data) {
    var data = psv.parse(headers + data.reponse)

    console.log(data);  
    console.log(data.columns);

})

Example https://bl.ocks.org/Andrew-Reid/5d1c7c7a2164ebde2c6ba0e3af7a281d

d3-请求：d3v3

与上面 d3v4 和 d3v5 中的第二个选项一样，我们可以解析文本，然后通过 dsv format 函数运行它（这里我们只需要考虑 v3/v4 之间 d3 命名空间的变化）：

var dsv = d3.dsv(";","text/plain");
var headers = ["time;number1;number2;number3;number4;number5;\n"]

d3.text("dsv.dsv", function(error,text) {
    var data = dsv.parse(headers+text);
    console.log(data);  
    // console.log(data.columns) // -> no columns property in v3
})

Example https://bl.ocks.org/Andrew-Reid/d465a421ae9d8b7cbfa1f592caf81f2c

Note

The ;在每行的末尾将创建一个空列，因为在下一行之前预计会有一个值。