在加载数据之前先启动一个http服务
python -m http.server
1.加载csv数据
错误示范
dataset异步被加载而不能及时使用,详见参考文献.
Which is a aync call so initially nodes will be undefined because var nodes; gives nothing to it. During the call and your var points = points = plot.selectAll(“circle”).data(nodes); already run and throw an error Cannot read property ‘length’ of undefined.
<html>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var nodes;
d3.csv("./test.csv", function(error, data) {
if (error) { // 如果 error 不是 null,肯定出错了
console.log(error); // 输出错误消息
} else { // 如果没出错,说明加载文件成功了
console.log(data); // 输出数据
nodes = data;
}});
</script>
</body>
</html>
2.加载json数据
d3.json("waterfallVelocities.json", function(json) {
console.log(json); // 输出到控制台
});
例子
d3.json("test.json", function(json){
var circle = svg.selectAll("circle")
.data(json)
.enter()
.append('circle')
.attr('cx', (d)=>xlinear(d.x))
.attr('cy', (d)=>ylinear(d.y))
.attr("r",10)
});
参考文献:
https://stackoverflow.com/questions/31001965/d3-json-loading-error-uncaught-typeerror-cannot-read-property-length-of-undef