D3 加载数据

在加载数据之前先启动一个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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值