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

【问题标题】：Dynamically Fill Drop-down from Directory so User Selects d3.js JSON Data从目录中动态填充下拉列表，以便用户选择 d3.js JSON 数据
【发布时间】：2017-06-26 16:23:48
【问题描述】：

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

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

我希望用户从浏览器的下拉列表中选择要使用的文件，而不是调用特定的 JSON 文件，该下拉列表由特定文件夹中的所有文件填充（“数据”文件夹是一个水平回升）。

我尝试根据这个问题 (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 创建下拉列表的最佳方法是什么？最终，viz 将托管在 IIS 上，我假设可以使用 .htaccess 文件。然而，与此同时，Python 的简单服务器正在开发中。

感谢大家提供的任何见解！

【问题讨论】：

标签： javascript php html json d3.js

【解决方案1】：

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

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

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

2) 文件选择处理程序将使用 fileHandler 注册一个新函数作为 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
    };
};

希望这会有所帮助。

【讨论】：