导入数据+处理数据加载错误(d3.js)

d3.csv()是一个异步方法,即在我们等待文件全部下载到浏览器的同时,其他代码会照样执行。(d3.json也是一样)

此时常见的错误,就是在回调函数外面引用外部数据——!!!为了以后的方便,最好在回调函数内部引用。

解决方法:声名一个全局变量,然后再调用d3.csv加载数据。在回调函数中,把数据复制给这个全局变量,然后再调用依赖数据显示图形的其他函数。借助全局变量保存函数,可以确保接下来调用的函数能够取到数据,即使将它们放在函数外面

例如:

var dataset;//初始为空的全局变量

d3.csv("do.csv",function(data)){
    dataset=data;
    genrateVis();//调用其他依赖数据
    hideLiadingMsg();//显示图形的函数
});

var useTheDataLater=function(){
    //假设此函数在csv()加载数据成功后的某一时刻被调用,那时可访问全局变量dataset。  
};

有时候,回调函数可能加载数据不成功也会继续执行,此时提供一个debug小方法:

var dataset;//初始为空的全局变量

d3.csv("do.csv",function(error,data)){
    
    if(error){
    //如果error非null,则出错
        console.log(error)//输出错误信息
    }
    else{
        console.log(data)
        dataset=data;
        genrateVis();//调用其他依赖数据
        hideLiadingMsg();//显示图形的函数
    }
});

var useTheDataLater=function(){
    //假设此函数在csv()加载数据成功后的某一时刻被调用,那时可访问全局变量dataset。  
};

猜你喜欢

转载自blog.csdn.net/weixin_51561130/article/details/117606124
今日推荐