Daten vom lokalen Computer

Question

Ich möchte Daten aus einer JSON-Datei auf meinem Computer laden. Ich weiß, dass ich ohne HTTP-Server nicht lesen kann, deshalb möchte ich ein Eingabefeld erstellen. Meine Datei wird erfolgreich gelesen, aber wenn ich die Daten an die Funktion zum Erstellen des Blasendiagramms sende, wird nichts erstellt. Wenn ich von lokalen laden, funktioniert es (ich führe einen HTTP-Server aus). Dies ist der Code:

<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)) 
// ..... 

Dies ist ein Online-Beispiel für Plunker: https://plnkr.co/edit/T8WFvj0qtMW5mFK6gOjO?p=preview

Dank.

Answer 1

Vielen Dank für Ihre Antworten! Dies ist der gute Code, senden Sie einfach die JSON und nicht 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 verwendet einen Dateipfad für das erste Argument und übergibt den geparsten JSON an seinen Rückruf. Da Sie den JSON selbst laden und parsen, müssen Sie d3.json nicht verwenden und sollten den JSON direkt an den Rückruf übergeben, als root.

Dies sollte funktionieren: https://plnkr.co/edit/0H6t9m642cxCcukPwDFH?p=preview

Wenn Sie auch von Ihrem Server bedient etwas über d3.json laden möchten, können Sie das tun, mit so etwas wie:

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