Question

我是d3.js的新手所以我知道这对某些人来说似乎是一个愚蠢的问题所以请耐心等待。我试图解析用户上传的csv文件并在控制台中输出它的输出。当我提供CSV文件的绝对路径时，我能够解析CSV文件，但是当我尝试使用文件上传功能时，我没有在控制台中获得任何输出。

使用Javascript代码 ..

    var dataset = [];
    d3.csv("sample.csv", function(data) {
    dataset = data.map(function(d) { return [ d["Title"], d["Category"], d["ASIN/ISBN"], d["Item Total"] ]; });
    console.log(dataset[0]);
    console.log(dataset.length);
    });

控制台输出 ...

["Men's Brooks Ghost 8 Running Shoe Black/High Risk Red/Silver Size 11.5 M US", "Shoes", "B00QH1KYV6", "$120.00 "]
 8

新的HTML代码 ..

    <input type="file" id="csvfile" name="uploadCSV"/>
    <br/>
    <button onclick="howdy()">submit</button>

修改后的Javascript代码（无效） ..

    var myfile = $("#csvfile").prop('files')[0];
    var reader = new FileReader();

    reader.onload = function(e) {
    var text = reader.result;
    }

    reader.readAsDataURL(myfile);

     var dataset = [];
    d3.csv(reader.result , function(data) {
    dataset = data.map(function(d) { return [ d["Title"], d["Category"], d["ASIN/ISBN"], d["Item Total"] ]; });
    console.log(dataset[0]);
    console.log(dataset.length);
    })

由于没有关于如何处理用户上传的CSV文件的官方文档，我无法弄清楚我的错误在哪里..有没有办法可以使用HTML5文件阅读器？请帮忙..

Answer 1

你很近但你不需要也不能在读者身上拨打d3.csv。结果。 d3.csv进行异步AJAX调用以从服务器检索CSV文件。您已经拥有文件内容并且只想解析，因此请使用d3.csv.parse。

完整的工作示例：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>

<body>
  <input type="file" onchange="loadFile()" />

  <script>
    var reader = new FileReader();  
    
    function loadFile() {      
      var file = document.querySelector('input[type=file]').files[0];      
      reader.addEventListener("load", parseFile, false);
      if (file) {
        reader.readAsText(file);
      }      
    }
    
    function parseFile(){
      var doesColumnExist = false;
      var data = d3.csv.parse(reader.result, function(d){
        doesColumnExist = d.hasOwnProperty("someColumn");
        return d;   
      });
      console.log(doesColumnExist);
    }
  </script>
</body>

</html>

使用D3.js解析上载的CSV文件

1 个答案: