Question

我是d3.js的新手。我只是设置了一个本地服务器，我正在尝试将一个示例json文件加载到我的html文件中，以便使用不同的可视化。我在浏览器中打开时没有显示任何内容，＆amp;我在控制台中收到此错误。 “未捕获的TypeError：无法读取null的属性'length'”

见下面的代码。第一个块是.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}

]

Answer 1

d3.json回调中的第一个参数是错误，第二个参数是解析后的数据。如果您在加载或解析数据时没有错误，则data变量将为null。你应该使用：

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

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

    // visualization code...

});

此致

Answer 2

未捕获的TypeError：无法读取null的属性'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的路径

从d3.js可视化开始

2 个答案: