Javascript 从目录中动态填充下拉列表，以便用户选择d3.JSON数据

我有一个由静态JSON文件驱动的d3强制定向图：

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

我不想调用特定的JSON文件，而是希望用户从浏览器中的下拉列表中选择要使用的文件，该下拉列表由特定文件夹中的所有文件填充（“数据”文件夹，它是一级备份）

我试图基于这个问题（）用PHP创建下拉列表：

选择文件
我不会详细介绍如何填充下拉菜单，但我可以快速为您提供如何使用文件处理程序的代码，以便用户可以选择他希望在D3例程中使用的JSON文件：

1） 创建输入选择按钮并将其注册到文件选择处理程序函数：

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

2） 文件选择处理程序将向文件处理程序注册一个新函数，作为onload回调的输入：

// 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） 使用fileHandler作为输入的函数调用D3.json代码

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

希望这有帮助

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