Как открыть json файл с помощью javascript d3?

66
8

Я пытаюсь извлечь элементы из файла JSON с помощью javascript, однако я получаю сообщение об ошибке, когда он не может загрузить файл JSON.


Вот как выглядит мой код:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>D3 Tutorial</title>
<script src="http://d3js.org/d3.v3.min.js"> </script>
</head>
<body>
<script>

d3.json("mydata.json", function(data) {

var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)

canvas.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", function (d) { return d.age * 10;})
.attr("height", 48)
.attr("y", function (d,i) { return i * 50; })
.attr("fill", "blue");

})

</script>
</body>
</html>


Это ошибка, которую выплевывает консоль:


XMLHttpRequest cannot load file:///C:/locationoffile..../mydata.json. Cross origin requests are only supported for HTTP. d3.v3.min.js:1
Uncaught TypeError: Cannot read property 'length' of null d3.v3.min.js:3
Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101 d3.v3.min.js:1

спросил(а) 2013-06-13T21:32:00+04:00 6 лет, 5 месяцев назад
3
Решение
71

d3.json предназначен для загрузки данных через HTTP. Как сказал @Quentin, вы можете настроить локальный сервер для обслуживания данных через HTTP.


Для развития, подобного этому, я использую firefox, он кажется более разрешительным, когда речь идет о локальных запросах на кросс-поиск, чем хром. В качестве альтернативы вы можете использовать http://tributary.io/

Пример с кодом: http://tributary.io/inlet/5776228

ответил(а) 2013-06-13T21:40:00+04:00 6 лет, 5 месяцев назад
Еще 2 ответа
47

Запросы на кросс-начало поддерживаются только для HTTP.


Загрузите сайт через HTTP. Если вам нужно, установите веб-сервер (например, Apache HTTPD или Lighttpd).

ответил(а) 2013-06-13T21:34:00+04:00 6 лет, 5 месяцев назад
35

Альтернативно для установки веб-сервера или использования сторонних онлайн-сред вы можете просто использовать другой редактор кода - Brackets. Он предлагает функцию под названием "Live Preview". Я просто ударил ту же ошибку Uncaught XMLHttpRequest с похожим кодом, может подтвердить, что код отлично работает в скобках.


Кронштейны работают непосредственно с вашим браузером, чтобы мгновенно изменять код, поэтому ваш предварительный просмотр в браузере всегда обновляется, пока вы кодируете - никаких перезагрузок страниц не требуется. Для того, чтобы ваш текущий просмотр веб-страниц не был затронут, в режиме скобки в режиме скобки открывается дополнительная копия Chrome с использованием отдельного профиля Chrome.//Из Как использовать скобки

ответил(а) 2017-02-20T22:25:00+03:00 2 года, 9 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема