Возникли проблемы с d3.json, не работает

Я довольно новичок как в Javascript, так и в D3, и я сам пытался попробовать примеры с сайта.Возникли проблемы с d3.json, не работает

Я использовал следующее для JS/HTML код:

<!DOCTYPE html> 
<html> 
    <head> 

     <script src="http://d3js.org/d3.v3.min.js"></script> 

     <style type="text/css"> 

     </style> 

    <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("y", function (d, i) { return i * 50; }) 
       .attr("fill", "blue") 
     }) 
      </script> 
    </body> 
</html>

и для моего "mydata.json" Я использую:

[ 
    {"name": "Maria", "age": 30}, 
    {"name": "Fred", "age": 50}, 
    {"name": "Jason", "age": 12} 
]

Каждый раз, я пытаюсь запустить его, он не имеет того же результата, что и примеры на странице примеров d3. Помогите, я пытаюсь выяснить, как работает d3, и я довольно начинающий программист.

источник

2013-09-21 user2697295

Что вы имеете в виду, когда говорите, что у него нет такого же результата? Обратите внимание, что вы не можете загружать локальные файлы с помощью 'd3.json', см., Например, [этот вопрос] (http://stackoverflow.com/questions/17214293/importing-local-json-file-using-d3-json-does-not-work). –

Не уверен, чего вы ожидаете, но ваш код устанавливает атрибут 'width' элементов' ', но не' height'; аналогично, он устанавливает позицию 'y', но не позицию' x'. Без этих свойств результаты будут не очень интересными. –

Кажется, что вы должны установить атрибут height, чтобы что-то отобразить.

Хороший способ отладки этой проблемы состоит в том, чтобы сначала заставить все работать без вызова json. Для этого я рекомендовал бы использовать консоль хром javascript для отображения ошибок и инспектора хрома, чтобы увидеть html-код.

data = [{ 
    "name": "Maria", 
    "age": 30 
}, { 
    "name": "Fred", 
    "age": 50 
}, { 
    "name": "Jason", 
    "age": 12 
}] 
//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", "20px")   
    .attr("y", function (d, i) { 
     return i * 50; 
    }) 
    .attr("fill", "blue") 
//})

jsFiddle: http://jsfiddle.net/chrisJamesC/LX9BF/

источник

2013-09-21 23:43:34

Как stated here, проблема связана с ограничением безопасности при использовании file:// URL-стиле.

Одним из решений, помимо встраивания объекта JSON в ваш файл .js, является загрузка файлов через http. Это легко достигается с помощью nodejs!

Выполните следующие действия:

Install nodejs.
Откройте командную строку, затем cd в вашу демонстрационную папку.
Введите команду: npm install Express. Это установит компоненты веб-сервера Express в папку .\node_modules.
Создайте новый файл web-server.js с содержимым, показанным ниже.
Вызвать сервер, набрав node .\web-server.js в командной строке.
Создать вложенную папку под названием htdocs затем переместите .html, .js и .json файлов, а также любые другие веб активы в нее. Это будет корневая папка вашего веб-сайта.
Открыть браузер и перейти к http://localhost:9999/[your-html-file].html, где [ваш-html-файл] заменен фактическим именем файла.

веб-server.js

var server_port = 9999; 
var application_root = __dirname + "\\htdocs", 
    express = require("express"), 
    path = require("path"); 
var app = express(); 
app.use(express.static(application_root)); 
app.use(app.router); 
app.listen(server_port); 
console.log("Web server listening on port " + server_port + ".");

Это должно получить вас мимо вопроса о загрузке файла .json. Фактически, это полезно, когда вам нужен легкий веб-сервер для тестирования кода.

источник

2014-07-21 14:11:48

Возникли проблемы с d3.json, не работает

ответ

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