Начиная с визуализации d3.js

Я новичок в d3.js. Я просто настроил локальный сервер, и я пытаюсь загрузить образец json-файла в свой html-файл, чтобы играть с различными визуализациями. Когда я открою его в своем браузере, ничего не отобразится, & Я получаю эту ошибку в консоли. «Uncaught TypeError: Невозможно прочитать свойство« длина »от нуля»Начиная с визуализации d3.js

См. Код ниже. Первый блок - это .html-файл, а второй блок - образец .json. Благодаря!

<!doctype html> 
<html> 

<head> 
<title> D3 Arrays </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", 50) 
      .attr("y", function (d, i) { return i * 48; }) 
      .attr("fill", "blue") 
}) 


</script> 

</body> 

</html>

данные JSON

[ 

{"name": "Judy", "age": 56}, 
{"name": "Glen", "age": 59}, 
{"name": "Dave", "age": 23} 

]

источник

2014-01-04 user3160978

Где находится второй блок? Где вы пытаетесь читать длину? – laaposto

VividD, спасибо за помощь! – user3160978

вам также не хватает атрибута x для прямоугольников – tomtomtom

Uncaught TypeError: Не удается прочитать свойство 'длину' нуль

из сообщения, может быть, вы не загрузить JSON правильно. вы можете проверить данные до

передать это d3.

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

console.log(data); // check the console output to judge if you get the 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", 50) 
     .attr("y", function (d, i) { return i * 48; }) 
     .attr("fill", "blue")

})

я скопировать код и данные http://jsfiddle.net/x5WzU/ и она работает правильно

так:

проверить свой сервер, чтобы проверить путь mydata.json

источник

2014-01-05 02:59:59

Вот что я сказал выше. – VividD

Первый аргумент в d3.json обратного вызова ошибка, а второй проанализированные данные. Если у вас нет ошибок при загрузке или анализе данных, ваша переменная data будет null. Вы должны использовать:

d3.json('mydata.json', function(error, data) { 

    if (error) { 
     console.error(error); 
    } 

    // visualization code... 

});

С уважением,

источник

2014-01-04 19:08:26

спасибо, пабло. кажется, что та же ошибка все еще появляется – user3160978

Можете ли вы написать небольшую скрипку, чтобы помочь вам отладить код? –

Начиная с визуализации d3.js

ответ

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