Разобрать загруженный файл CSV с помощью D3.js

Я новичок в 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 ?? Пожалуйста помоги..


csv javascript d3.js filereader fileparsing
person Lucy    schedule 18.03.2016    source источник
comment
Проблема в том, что эта строка $("#csvfile")[0].files не дает вам содержимого файла. Сначала вам нужно загрузить файл на сервер и вернуть URL-адрес загруженного файла. Затем вам нужно обновить код на стороне клиента (javascript), чтобы использовать URL-адрес загруженного файла, а не только содержимое ввода загрузки файла.   -  person Tjaart van der Walt    schedule 18.03.2016
comment
Разве мы не можем использовать для этого HTML5 File Reader API??   -  person Lucy    schedule 18.03.2016
comment
Да, вы можете использовать html5 Fie Reader API   -  person Tjaart van der Walt    schedule 18.03.2016
comment
Я отредактировал свой код выше, чтобы использовать программу чтения файлов для получения URL-адреса, но все же я не получаю никакого вывода в консоли. Не могли бы вы взглянуть на мой отредактированный код выше и сказать мне, где я ошибаюсь?   -  person Lucy    schedule 18.03.2016
comment
см. developer.mozilla.org/en-US/docs/ Web/API/FileReader/ вам необходимо получить доступ к данным в обратном вызове onload. Вы установили переменную text, но никогда ее не использовали. Возможно, вам придется вызвать d3.csv() внутри обратного вызова, когда содержимое файла будет доступно.   -  person Tjaart van der Walt    schedule 18.03.2016

Ответы (1)


arrow_upward
8
arrow_downward

Вы близки, но вам это не нужно и вы не можете вызывать d3.csv для reader.result. d3.csv выполняет асинхронный вызов AJAX для получения CSV-файла с сервера. У вас уже есть содержимое файла, и вы просто хотите его проанализировать, поэтому используйте d3.csv.parse.

Полный рабочий пример:

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" 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>

person Mark    schedule 18.03.2016
comment
Есть ли способ проверить, существуют ли определенные столбцы в файле CSV внутри функции parseFile()?? - person Lucy; 29.03.2016