从 d3.js 可视化开始答案

【问题标题】：Starting out with d3.js visualizations从 d3.js 可视化开始
【发布时间】：2014-01-22 09:46:08
【问题描述】：

我是 d3.js 的新手。我刚刚设置了一个本地服务器，我正在尝试将一个示例 json 文件加载到我的 html 文件中以使用不同的可视化。当我在浏览器中打开它时，什么都不会显示，并且我在控制台中收到此错误。 “未捕获的 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}

]

【问题讨论】：

第二块在哪里？您在哪里尝试读取长度？
VividD，感谢您的帮助！
您还缺少矩形的 x 属性
为我工作 -- vida.io/documents/XH7kPcWCD5C2erJZC
如果您的代码中没有“length”，您怎么可能收到包含单词“length”的错误消息？

标签： javascript html json d3.js

【解决方案1】：

未捕获的类型错误：无法读取 null 的属性“长度”

从消息中，也许您没有正确加载 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 的路径

【讨论】：

就是我上面说的。

【解决方案2】：

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

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

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

    // visualization code...

});

问候，

【讨论】：