如何在D3上上传(客户端）和读取CSV“抽象”数据

How to upload (client-side) & read CSV "abstract" data on D3?

本文关键字：读取 CSV 抽象 数据 客户端 D3      更新时间：2023-09-26

我实际上坚持我的研究。我想通过上传 CSV 文件使用 D3（如条形图）创建一些图表。

我发现了一些非常有趣的东西（http://bl.ocks.org/cjrd/6863459），但是，它使用的是JSON，并且文件中的每个信息都由名称（节点，边缘）清楚地标识。

我做了这样的事情： 

    d3.select("#upload-input").on("click", function(){
    document.getElementById("hidden-file-upload").click();
});
d3.select("#hidden-file-upload").on("change", function(){
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        //Files vars
        var uploadFile = this.files[0];
        var filereader = new window.FileReader();
        filereader.onload = function(){
            //Txt file output
            var txtRes = filereader.result;
            try{
                //TODO Read CSV
                var data = d3.csv.parse(txtRes);

但是我现在坚持使用这种方法（d3.csv.parse（））。

想象一下这样的CSV：

   chr19_pos17941294_SNV_C_JAK3;chr2_pos216242917_SNV_A_FN1;chr21_pos46320313_SNV_T_ITGB2;chr5_pos138266546_SNV_A_CTNNA1;chr6_pos160468278_SNV_G_IGF2R
   15;11;21;11;41;31

（这是DNA基因以及有多少患者确实拥有它们）。

那么，首先，如何使用解析方法呢？其次，如何正确捕获每个列名称？

我认为这样的事情可以访问名称：

data[0]
但是，我

做了一些测试，不仅仅是我得到 JSON 对象。

看起来您没有加载 CSV（C=逗号），而是加载"SSV"（S=分号）。 d3.csv.parse假设它正在获取实际的csv，因此您无法使用它。但是，d3 有一个较低级别的对象（d3.csv幕后使用它），它可以解析任何 DSV（D=delimeter）。它被称为d3.dsv，并记录在这里。所以你的代码可以做类似的事情

    filereader.onload = function(){
        //Txt file output
        var txtRes = filereader.result;
        // Init the "SSV" parser, which splits data on semi-colons
        var parser = d3.dsv(';')
        try{
            // Parse the data
            var data = parser.parse(txtRes);

根据您的示例数据，解析data将是：

[
    {
        "chr19_pos17941294_SNV_C_JAK3": "15",
        "chr2_pos216242917_SNV_A_FN1": "11",
        "chr21_pos46320313_SNV_T_ITGB2": "21",
        "chr5_pos138266546_SNV_A_CTNNA1": "11",
        "chr6_pos160468278_SNV_G_IGF2R": "41"
    }
]
相关文章：