Question

我实际上坚持我的研究。我想通过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对象。

Answer 1

您似乎没有加载CSV（C =逗号），而是加载了＆＃34; SSV＆＃34; （S =分号）。 d3.csv.parse假设它获得了实际的csv，因此您无法使用它。但是，d3有一个较低级别的对象 - d3.csv在幕后使用 - 可以解析任何DSV（D =分隔符）。它被称为d3.dsv，并且已记录here。因此，您的代码可以执行类似

的操作

    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"
    }
]

如何上传（客户端）＆amp;阅读CSV＆＃34;摘要＆＃34;关于D3的数据？

1 个答案: