Как загрузить внешние файлы JSON в D3?

У меня возникла проблема с загрузкой внешнего файла JSON, data.json в этот сценарий D3.js. Я не знаю, важно ли это, но я запускаю сервер с Python 3 и на 0.0.0.0:8888. Вот вопрос, который меня беспокоит:Как загрузить внешние файлы JSON в D3?

Когда я явно определить переменную с данными JSON и использовать console.log, то консоль разработчика Chrome показывает, что объект в настоящее время выводится с помощью сценария.
Когда я использую d3.json для загрузки внешнего файла JSON с массивом объектов, консоль разработчика Chrome выводит undefined.

JSON файл - data.json

[{"name": "Computer Science A","scores": [1, 2, 3, 4, 5]},]

Сайт - index.html

<html> 
<body> 
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> 
<script> 
var data; 
d3.json("data.json", function(d) { 
    data = d; 
}); 
console.log(data); 
</script> 
</html>

При запуске консоли выводит undefined вместо вывода содержимого объекта JSON, который находится внутри массива накоп лен в файле data.json.

Однако второй метод работает отлично, а консольные выходы [Object], что указывает на успешное обнаружение JSON.

<html> 
<body> 
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> 
<script> 
var data = [{"name": "Computer Science A","scores": [1, 2, 3, 4, 5]},]; 
console.log(data); 
</script> 
</html>

Что я здесь делаю неправильно? Я попытался настроить объект JSON, положив console.log внутри функции D3, но ничего не работает.

Edit: Странная часть что, когда я изменить файл JSON на это, он отлично работает:

{"name": "Computer Science A","scores": [1, 2, 3, 4, 5]}

источник

2016-03-17 Shrey

You не могу загрузить локальные файлы .. Аналогичный вопрос http://stackoverflow.com/questions/371875/local-file-access-with-javascript –

Я забыл включить это - я смог прочитать локальный файл JSON около пяти минут.Затем я что-то изменил, а потом перестала работать. Мне интересно, какое постоянное решение может быть связано с этой проблемой. – Shrey

ваши данные не определено, потому что console.log функция уволят перед тем функции d3.

d3 загрузить файл асинхронно.

попробовать этот

<html> 
<body> 
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> 
<script> 
    var data; 
    d3.json("data.json", function(d) { 
    data = d; 
    console.log(data); 
}); 
</script> 
</html>

источник

2016-03-17 03:38:34 Semooze

Не работает - он говорит «null». Также попытался удалить переменную 'data' и выполнить' console.log (d) ', что дает мне тот же ответ. – Shrey

@ У вас проблема не в этом XMLHttpRequest не может загрузить файл: ///home/myuser/tmp/d3/data.json. Запросы на кросс-начало поддерживаются только для схем протокола: http, data, chrome, chrome-extension, https, chrome-extension-resource, не так ли? – Semooze

Возможно, но я не совсем уверен. Есть ли причина, почему вы предлагаете это? – Shrey

Ах, так что я играл с файлом JSON и нашел проблему. Кажется, я добавил дополнительный , после первого объекта, и поэтому D3 не понравилась дополнительная запятая. Изменение файла JSON для этого установил его:

{"name": "Computer Science A","scores": [1, 2, 3, 4, 5]}

источник

2016-03-17 04:00:37 Shrey

В файле data.json, [{ "Имя": "Computer Science A", "оценки": [1, 2, 3, 4, 5 ]},]

У вас есть запятая в конце ее.

Если вы удалите его, он должен работать нормально [{ "имя": "оценки" "Computer Science A": [1, 2, 3, 4, 5]}]

<html> 
<body> 
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> 
<script> 
var data; 
d3.json("data.json", function(d) { 
data = d; 
console.log(data); 
}); 
</script> 
</html>

источник

2016-03-17 11:51:36 user3696882

Да, я понял, что это проблема. Однако почему «[{« name »:« Computer Science A »,« score »: [1, 2, 3, 4, 5]},]' работает, когда прямо присваивает его переменной? Сценарий, кажется, терпит неудачу только тогда, когда он читается извне. – Shrey

Как загрузить внешние файлы JSON в D3?

ответ

Смежные вопросы