Dynamisch Füllen Ausgliederungs aus Verzeichnis so Benutzer wählt d3.js JSON Daten

Question

Ich habe ein d3 Zwangs gerichteten Graphen durch eine statische JSON-Datei bereitgestellt:

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

Statt eine bestimmte JSON-Datei aufzurufen, würde ich Wie der Benutzer, um auszuwählen, welche Datei verwendet werden soll, aus einem Dropdown-Menü im Browser, das von allen Dateien in einem bestimmten Ordner (dem Ordner "Data", der eine Ebene zurück liegt) ausgefüllt wird.

Mein Versuch, die Drop-down mit PHP auf diese Frage anhand der Erstellung (populate a 'select list' from a directory on my server using php and html):

<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> 

Dieser Code ist nach dem </head> Tag in meinem html, aber vor den <script> Tags. Dies führt zu einer Dropdown-Liste, in der die einzige Option "Datei auswählen" ist und keine der JSON-Dateien im Ordner "Data" angezeigt wird. Wie bekomme ich die Dateien in der Dropdownliste angezeigt? Wie fahre ich dann die d3-Visualisierung mit der ausgewählten Datei? Ich stelle mir vor, es gibt eine Art von on-event, die verwendet werden könnte, aber ich bin mir nicht sicher, wo ich anfangen soll.

Ich bin jetzt klar, dass PHP nicht inhärent in einer .html Datei enthalten sein kann und ordnungsgemäß funktioniert. Was ist der beste Weg, um es zu integrieren oder verwenden Sie reines HTML/Javascript, um das Drop-Down-Menü zu erstellen? Schließlich wird der Viz auf IIS gehostet, wobei ich annahm, dass eine .htaccess-Datei verwendet werden kann. In der Zwischenzeit findet jedoch die Entwicklung mit dem einfachen Python-Server statt.

Vielen Dank für alle Einsichten, die Sie alle haben könnten!

Answer 1

Ich werde nicht ins Detail gehen, wie das Dropdown-Menü zu füllen, aber ich kann Ihnen schnell den Code geben, wie man einen Dateihandler verwendet, so dass der Benutzer die JSON-Datei auswählen kann, die er auf Ihrem verwenden möchte D3 Routine:

1) erstellen sie die Eingangsauswahltaste und registrieren sie sie in eine Datei wählen Handler-Funktion:

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

2) wählen sie die Datei-Handler wird eine neue Funktion mit dem Filehandler als Eingabe auf dem onload registrieren Rückruf:

// 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) Kreta eine Funktion mit einem Filehandler als Eingabe, die Ihren D3.json Code

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

hoffe, das hilft nennt.