動態填補目錄下拉使用戶選擇d3.js JSON數據

我有一個D3強制向圖搭載一臺靜態JSON文件：動態填補目錄下拉使用戶選擇d3.js JSON數據

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創建下拉列表的最佳方式是什麼？最終，這個文件將被託管在IIS上，我假定可以使用.htaccess文件。但與此同時，Python的簡單服務器正在發展。

非常感謝您的光臨！

來源

2017-06-26 Cameron Taylor

我不會詳細介紹如何填充下拉菜單，但我可以快速給你如何使用文件處理程序的代碼，以便用戶可以選擇他想用於您的JSON文件D3例程：

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

希望這有助於。

來源

2017-10-03 09:24:56 Rafiz01

動態填補目錄下拉使用戶選擇d3.js JSON數據

回答

相關問題