ローカルコンピュータからのデータ

Question

私のコンピュータ上のJSONファイルからデータをロードしたいと思います。私はHTTPサーバーなしで読むことができないので、入力フィールドを作成したいと思います。私のファイルは分かりやすく読み込まれていますが、データを送信してバブルチャートを作成すると、何も作成されません。私はローカルからロードする場合、それは動作します（私は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); 
     } 
    }); 
};