ユーザーがJSONデータ

Question

d3.js選択し、私は、静的なJSONファイルを搭載しD3強制有向グラフ持っているので、動的ディレクトリからのドロップダウンを入力します。

d3.json("../Data/sample.json", function(error, graph) { 
    //do stuff 
}); 

代わりの特定のJSONファイルを呼び出すことを、私は、考え特定のフォルダ内のすべてのファイル（1つのレベルの「データ」フォルダ）によって作成されたブラウザのドロップダウンから、使用するファイルを選択することができます。この質問（populate a 'select list' from a directory on my server using php and html）に基づいて、PHPでドロップダウンを作成するに

私の試み：

<select name="s1"> 
     <option value="" selected="selected">Select File</option> 
    <?php 
     foreach(glob(dirname(__FILE__) . '../Data/*') as $filename){ 
     $filename = basename($filename); 
     echo "<option value='" . $filename . "'>".$filename."</option>"; 
    } 
?> 

</select> 

このコードは私のhtmlで</head>タグの後ですが、<script>タグの前に。これによりドロップダウンが表示され、唯一のオプションは「ファイルの選択」で、「データ」フォルダ内のJSONファイルは一切表示されません。ドロップダウンにファイルを表示するにはどうすればよいですか？次に、選択したファイルでd3ビジュアライゼーションを実行するにはどうすればよいですか？私は使用できるかもしれないいくつかのタイプのon-eventがあると思いますが、どこから始めるべきかわかりません。

私は今、phpが本来.htmlファイルに含まれておらず正しく動作していることを認識しています。それを含めるか、純粋なhtml/javascriptを使ってドロップダウンを作成するのに最適な方法は何ですか？最終的にはIIS上でホストされ、.htaccessファイルを使用できると仮定します。一方、開発はPythonの単純なサーバーで行われています。

ありがとうございました！

Answer 1

ドロップダウンメニューをどのように埋め込むかについて詳しくは触れませんが、ファイルハンドラを使用する方法をコードで簡単に説明して、ユーザーが使用するJSONファイルを選択できるようにしますD3ルーチン：

1）入力選択ボタンを作成し、ファイルを選択ハンドラ関数にそれを登録します。

var input = d3.select("body").append("input") 
     .attr("type","file") 
     .on("change", handleFileSelect) 

2）ファイル選択ハンドラはオンロードでの入力としてのFileHandlerで新しい関数を登録しますコールバック：

// Single file handler 
function handleFileSelect() { 
    // Check for the various File API support. 
    if (window.File && window.FileReader && window.FileList && window.Blob) { 
    // Great success! All the File APIs are supported. 
    } else { 
     alert('The File APIs are not fully supported in this browser.'); 
    } 

    var f = event.target.files[0]; // FileList object 
    var reader = new FileReader(); 

    reader.onload = function(event) { 
     load_d3(event.target.result) 
    }; 
    // Read in the file as a data URL. 
    reader.readAsDataURL(f); 
} 

3）クレタあなたD3.jsonコードホープ、このことができます

function load_d3(fileHandler) { 
    d3.json(fileHandler, function(error, root) { 
     //do stuff 
    }; 
}; 

呼び出し、入力としてのFileHandlerを持つ関数、。