如何获得数据与TSV或CSV数组d3.js从TXT文件

how to get data with tsv or csv to array in d3.js from a txt file?

本文关键字：js d3 TXT 文件 数组 CSV 数据 何获得 TSV      更新时间：2023-09-26

我用这个来解析csv文件，并创建一个数组数据指定在d3文档:

d3.tsv("classes_h.txt", function(data) { 
    data.forEach(function(d) { 
        console.log(data[0]);
        console.log("lol");
    });
    console.log(data[0]);
});

或

d3.tsv("classes_h.txt", function(data) { 
    console.log(data[0]);
});

然而，当我调用data[0]时，我在控制台中得到未定义。我也试着写出"data"而不是"data[0]"，这导致我得到一个空数组-> []:

我的txt文件看起来像这样:http://puu.sh/7LrRm.png

一切都是用一个选项卡分开，所以tsv是我正在使用的，如果我正确理解它，是否使用tsv或csv取决于数据的格式?

解决

TSV不仅接受tab分隔的元素，还把它们扔进数组。您可以将格式设置为如下所示:

Group1 Group2 Group3
data1  data1  data1
data2  data2  data2
data3  data3  data3

然后可以打印出来并验证数据是否已加载:

data.forEach(function(d) { 
    console.log(d);
});

当打印出整个数据时，D3将创建一个对象，每个对象都有一个与所有数据绑定的Group。下面是我的示例的输出:

Object {Group1: "data1", Group2: "data1", Group3: "data1"}
Object {Group1: "data2", Group2: "data2", Group3: "data2"}
Object {Group1: "data3", Group2: "data3", Group3: "data3"}

这些对象等价于data[0]、data[1]和data[2]，那么剩下group1、group2和group3

是本地托管的吗?如果它是你加载的页面与file://协议或它是通过http服务(如http://localhost:8080)。

如果它正在使用file://，那么你将有问题，因为浏览器将不允许文件加载d3.tsv()用来获取文件的XMLHttpRequest。

或者按照Lars的建议检查错误

d3.tsv("file.tsv", function(error, data){
    if(error){
        return console.log(error);
    }
    // there was no error
});

将data[0]更改为d.您想要显示的数据头应该可以。

d3.tsv("classes_h.txt", function(data) { 
data.forEach(function(d) { 
    console.log(d.*displaydata*);
    console.log("lol");
});
相关文章：