导入数据+处理数据加载错误(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。  
};

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
异步加载地图数据可以提高页面加载速度和渲染效率,D3.js提供了多种方式实现异步加载地图数据,以下是一种常用方式的代码示例: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>中国地图</title> <style> svg { width: 100%; height: 100%; } .province { fill: #ccc; stroke: #fff; stroke-width: 1px; } .city { fill: #f00; stroke: #fff; stroke-width: 1px; } </style> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <svg id="map"></svg> <script> // 创建地图容器 var svg = d3.select("#map"); var width = svg.node().getBoundingClientRect().width; var height = svg.node().getBoundingClientRect().height; // 定义投影 var projection = d3.geoMercator() .center([105, 38]) .scale(600) .translate([width / 2, height / 2]); // 定义路径生成器 var path = d3.geoPath() .projection(projection); // 异步加载省份数据 d3.json("provinces.json").then(function(provinces) { // 绘制省份 svg.selectAll(".province") .data(provinces.features) .enter() .append("path") .attr("class", "province") .attr("d", path); }); // 异步加载城市数据 d3.json("cities.json").then(function(cities) { // 绘制城市 svg.selectAll(".city") .data(cities.features) .enter() .append("circle") .attr("class", "city") .attr("cx", function(d) { return projection(d.geometry.coordinates)[0]; }) .attr("cy", function(d) { return projection(d.geometry.coordinates)[1]; }) .attr("r", 5); }); </script> </body> </html> ``` 该示例代码中使用了D3.js的Promise机制实现异步加载地图数据。通过`d3.json()`方法异步加载JSON格式的地图数据,然后在`then()`回调函数中绘制地图。由于异步加载是并行进行的,因此可以提高地图绘制效率。需要注意的是,在异步加载过程中需要进行错误处理,确保地图数据加载成功并正确解析。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值