來自本地計算機的數據

Question

我想從計算機上的 JSON 文件加載數據。 我知道沒有 HTTP 服務器我無法閱讀，所以我想創建一個輸入字段。 我的文件被成功讀取，但是當我將數據發送到函數以創建氣泡圖時，沒有創建任何內容。 如果我從本地加載它就可以工作（我執行一個 HTTP 服務器）。 這是代碼：

<script type="text/javascript">
    var json;
    function handleFileSelect(evt) {
        var files = evt.target.files;
    }
    document.getElementById('files').addEventListener('change', handleFileSelect, false);
    function handleFileSelect(evt) {
        var files = evt.target.files;
        var output = [];
        for (var i = 0, f; f = files[i]; i++) {
            var reader = new FileReader();
            reader.onload = (function (theFile) {
                return function (e) {
                        json = JSON.parse(e.target.result);
                        alert('json global var has been set to parsed json of this file here it is unevaled = \n' + JSON.stringify(json));
                        initData(JSON.stringify(json)); // Doesn't works
                        //initData("data.json"); // Works
                }
            })(f);
            reader.readAsText(f);
        }
    }
    document.getElementById('files').addEventListener('change', handleFileSelect, false);

</script>


 function initData(data){
          d3.json(data, function(error, root) {
        if (error) throw error;

        var node = svg.selectAll(".node")
                .data(bubble.nodes(classes(root))
// .....

這是 Plunker 的在線示例： https ://plnkr.co/edit/T8WFvj0qtMW5mFK6gOjO ? p = preview

謝謝。

Answer 1

d3.json使用文件路徑作為其第一個參數，並將解析后的 json 傳遞給它的回調。 由於您自己加載和解析 json，因此您不需要使用d3.json ，而應該將 json 直接作為root傳遞給回調。

這應該有效： https : //plnkr.co/edit/0H6t9m642cxCcukPwDFH?p=preview

如果您還想通過d3.json加載服務器提供的內容，您可以使用以下內容：

var loadFromUrl = function(url){
    d3.json(url, function(error, data){
        if(!error) {
           initData(data);
        }
    });
};

Answer 2

感謝您的回答！ 這是好的代碼，只需發送 JSON，不要使用 d3.json

<script type="text/javascript">
    var json;
    function handleFileSelect(evt) {
        var files = evt.target.files;
    }
    document.getElementById('files').addEventListener('change', handleFileSelect, false);
    function handleFileSelect(evt) {
        var files = evt.target.files;
        var output = [];
        for (var i = 0, f; f = files[i]; i++) {
            var reader = new FileReader();
            reader.onload = (function (theFile) {
                return function (e) {
                        json = JSON.parse(e.target.result);
                        alert('json global var has been set to parsed json of this file here it is unevaled = \n' + JSON.stringify(json));
                        initData(json); // Doesn't works
                        //initData("data.json"); // Works
                }
            })(f);
            reader.readAsText(f);
        }
    }
    document.getElementById('files').addEventListener('change', handleFileSelect, false);

</script>

function initData(root){
        var node = svg.selectAll(".node")
                .data(bubble.nodes(classes(root))
//....