来自本地计算机的数据

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))
//....

来自本地计算机的数据

Data from local computer

javascript

bubble-chart

input

loaddata

d3.js