使用分号分隔符和无标题获取和处理数据

问题描述 投票:3回答:1

我在理解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的文档,创建轴和缩放,转换等没有问题,但我很难理解实际从真实中获取数据来源(例如互联网)并将它们处理成可行的东西。请严厉批评我所说的任何内容并提供建议,我想学习。

javascript d3.js fetch-api import-from-csv
1个回答
1
投票

目前还不清楚你使用的是哪个版本的d3,你引用了fetch API,但是你的一些代码看起来像问题代码中的d3v3和v4(可能是问题),它不使用fetch API。无论如何,我将通过v5,还有版本4和3。

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

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

不需要d3.csv.parse,但在你的问题代码块中

在下面的所有内容中,为了简单起见,我删除了日期格式(oops,将其保留在v5演示中)。

由于在d3v5中使用了d3-fetch模块,这种方法与更密切相关的d3v3 / v4略有不同(密切相关的是它们都使用d3-request模块,否则会有一些差别)。

d3-fetch: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

d3-request:d3v4

d3v4为此提供了更多灵活性。

如果我们查看API文档,我们会看到d3.csv等效于:

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

(Qazxswpoi)

因此,如果我们使用d3.dsvFormat创建一个新格式,我们可以通过格式运行内容并获取我们的数据,我们也可以在一个步骤中处理此过程中的标题:

docs

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); });

这可能是更不典型的方法,所以我们可以模仿我用上面的v5做的方式:

Example

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); })

d3-request:d3v3

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

Example

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将创建一个空列,因为预期在下一行之前的值。

© www.soinside.com 2019 - 2024. All rights reserved.