Импорт локального json файла с использованием d3.json не работает

Я пытаюсь импортировать локальный .json файл, используя d3.json().

Файл filename.json хранится в той же папке, что и мой html файл.

Тем не менее, (json) -параметр имеет значение null.

d3.json("filename.json", function(json) {
    root = json;
    root.x0 = h / 2;
    root.y0 = 0;});
    . . . 
}

Мой код в основном такой же, как в этом примере d3.js

Ответ 1

Если вы работаете в браузере, вы не можете загружать локальные файлы.

Но довольно просто запустить dev-сервер из командной строки, просто cd в каталог с вашими файлами, а затем:

python -m SimpleHTTPServer

(или python -m http.server с использованием python 3)

Теперь в вашем браузере перейдите по localhost:3000 (или :8000 или что-то, что отображается в командной строке).

Следующее использовалось для работы в старых версиях d3:

var json = {"my": "json"};
d3.json(json, function(json) {
    root = json;
    root.x0 = h / 2;
    root.y0 = 0;
});

Ответ 2

http://bl.ocks.org/eyaler/10586116 См. Этот код, это чтение из файла и создание графика. У меня также была та же проблема, но позже я выяснил, что проблема была в json файле, который я использовал (дополнительная запятая). Если вы получаете null, попробуйте напечатать ошибку, которую вы получаете, например, это может быть.

d3.json("filename.json", function(error, graph) {
  alert(error)
})

Ответ 3

В дополнение к предыдущим ответам проще использовать HTTP-сервер, предоставляемый большинством машин Linux/Mac (только с установленным Python).

Выполните следующую команду в корневом каталоге вашего проекта

python -m SimpleHTTPServer

Затем вместо доступа к file://.....index.html откройте браузер на http://localhost:8080 или порт, предоставляемый при запуске сервера. Таким образом браузер заставит все файлы в вашем проекте не блокироваться.

Ответ 4

Вы не можете легко прочитать локальные файлы, по крайней мере, не в Chrome, а, возможно, и в других браузерах.

Простейшим обходным решением является просто включить ваши данные JSON в ваш файл script, а затем просто избавиться от вашего вызова d3.json и сохранить код в обратном вызове, который вы передаете ему.

Тогда ваш код будет выглядеть так:

json = { ... };

root = json;
root.x0 = h / 2;
root.y0 = 0;
...

Ответ 5

Я использовал это

d3.json("graph.json", function(error, xyz) {
    if (error) throw error;
    // the rest of my d3 graph code here
    }

так что вы можете обратиться к своему файлу json, используя переменную xyz, а graph - это имя моего локального файла json

Ответ 6

В версии d3.v5 вы должны сделать это как

d3.json("file.json").then(function(data){ console.log(data)});

Аналогично с CSV и другими форматами файлов.

Вы можете найти более подробную информацию на https://github.com/d3/d3/blob/master/CHANGES.md