Данные с локального компьютера

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

Спасибо за ваши ответы! Это хороший код, просто отправьте 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))
//....

Answer 2

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