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

0

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

См. Код ниже. Первый блок - это.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}

]
  • 0
    Где второй блок? Где вы пытаетесь прочитать длину?
  • 0
    VividD, спасибо за вашу помощь!
Показать ещё 4 комментария
Теги:
d3.js

2 ответа

0
Лучший ответ

Uncaught TypeError: Невозможно прочитать значение свойства length

из сообщения, возможно, вы не загрузили 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

Поделиться
  • 1
    Вот что я сказал выше.
0

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

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

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

    // visualization code...

});

С Уважением,

Поделиться
  • 0
    спасибо, пабло. кажется, что та же самая ошибка все еще появляется
  • 0
    Можете ли вы написать небольшую скрипку, чтобы помочь вам отладить код?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню