Данные с локального компьютера

Question

Я хотел бы загрузить данные из файла JSON на свой компьютер. Я знаю, что я не могу читать без HTTP-сервера, поэтому я хотел бы создать поле ввода. Мой файл успешно прочитан, но когда я отправляю данные для создания Bubble Chart, ничего не создается. Если я загружаюсь из локального, он работает (я выполняю HTTP-сервер). Это код:

<script type="text/javascript"> 
    var json; 
    function handleFileSelect(evt) { 
     var files = evt.target.files; 
    } 
    document.getElementById('files').addEventListener('change', handleFileSelect, false); 
    function handleFileSelect(evt) { 
     var files = evt.target.files; 
     var output = []; 
     for (var i = 0, f; f = files[i]; i++) { 
      var reader = new FileReader(); 
      reader.onload = (function (theFile) { 
       return function (e) { 
         json = JSON.parse(e.target.result); 
         alert('json global var has been set to parsed json of this file here it is unevaled = \n' + JSON.stringify(json)); 
         initData(JSON.stringify(json)); // Doesn't works 
         //initData("data.json"); // Works 
       } 
      })(f); 
      reader.readAsText(f); 
     } 
    } 
    document.getElementById('files').addEventListener('change', handleFileSelect, false); 

</script> 


function initData(data){ 
      d3.json(data, function(error, root) { 
     if (error) throw error; 

     var node = svg.selectAll(".node") 
       .data(bubble.nodes(classes(root)) 
// ..... 

Это онлайн пример Plunker: https://plnkr.co/edit/T8WFvj0qtMW5mFK6gOjO?p=preview

Спасибо.

Answer 1

Спасибо за ваши ответы! Это хороший код, просто отправьте JSON и не используйте d3.json

<script type="text/javascript"> 
    var json; 
    function handleFileSelect(evt) { 
     var files = evt.target.files; 
    } 
    document.getElementById('files').addEventListener('change', handleFileSelect, false); 
    function handleFileSelect(evt) { 
     var files = evt.target.files; 
     var output = []; 
     for (var i = 0, f; f = files[i]; i++) { 
      var reader = new FileReader(); 
      reader.onload = (function (theFile) { 
       return function (e) { 
         json = JSON.parse(e.target.result); 
         alert('json global var has been set to parsed json of this file here it is unevaled = \n' + JSON.stringify(json)); 
         initData(json); // Doesn't works 
         //initData("data.json"); // Works 
       } 
      })(f); 
      reader.readAsText(f); 
     } 
    } 
    document.getElementById('files').addEventListener('change', handleFileSelect, false); 

</script> 

function initData(root){ 
     var node = svg.selectAll(".node") 
       .data(bubble.nodes(classes(root)) 
//.... 

Answer 2

d3.json использует путь к файлу для своего первого аргумента и передает обработанный json свой обратный вызов. Поскольку вы загружаете и разбираете json самостоятельно, вам не нужно использовать d3.json, и он должен просто передать json для обратного вызова непосредственно как root.

Это должно работать: https://plnkr.co/edit/0H6t9m642cxCcukPwDFH?p=preview

Если вы хотите загрузить через d3.json что-то служил с вашего сервера, вы можете сделать это, используя что-то вроде:

var loadFromUrl = function(url){ 
    d3.json(url, function(error, data){ 
     if(!error) { 
      initData(data); 
     } 
    }); 
};