D3.js中强制异步文件读取同步的几种方法


Posted in Javascript onFebruary 06, 2017

发现问题

在使用d3.js时,我们经常会使用d3.csv()或者d3.json()函数来从文件中读取出数据,不幸的是,偶尔代码的结果并不是我们预料的那样。习惯了过程式编程的我开始的时候也是这样,最让人头疼的是javascript并不会告诉你问题出在哪里了。我第一次遇到这个问题的时候,找了半天bug,确定代码主体部分没有问题之后,我只能开始使用console.log()将变量一个一个的输出到控制台里。

第一次遇到这个问题时的图片是这样的:

D3.js中强制异步文件读取同步的几种方法

问题出在第72行和第75行,中间几行完全没有对ordertxt进行操作,但是最后的结果就是和预想的输出不吻合,后来找了个其他方法把这个问题给解决了,今天又遇到了类似的这个问题,就下决心来拔掉这根刺。

试验

\<script\>

console.log("before csv1 ");
d3.csv("flowers.csv", function(data) {console.log(data)});
console.log("before csv2");
d3.csv("flowers.csv",function(error,data2) {console.log(error, data2)});

\</script\>

believe it or not,上面的代码将产生下面图中的输出结果,因为javascript的 异步特性 。说到异步,大部分时候是让人开心的,但偶尔也会令人头疼,至少在这里,就是令人头疼。

D3.js中强制异步文件读取同步的几种方法

解决方法1

第一次遇到这个问题的时候,我巧妙的绕开了这个问题,使用的方法是:我把数据的处理放在了d3.csv(“flowers.csv”,function(data){dealWithData()…})回调函数里面,这样数据的处理就和d3的读文件操作变成了绑在一根绳上的蚂蚱了,要么一起执行完,要么都不执行。貌似世界和平了,但是今天下午又遇到了这个问题,而且数据的变化是随时随地的,可不是和上一次遇到的那样,所有会发生的变化都可以预先写成代码的。于是我开始了对解决方法的苦苦追寻。

解决方法2

第二种方法是借助一些helper类库(queue.js)来强制数据在加载完成之后才去触发相应的操作。这种方法是我在网上看到的,并没有去亲自试过,也许会成功,但是对于我们会变化的数据,不能提前将处理逻辑写出代码,这种方法还是不合格的。

解决方法3

第三种方法是在stack overflow里查到的,试了一下是可以的,他这里用的是d3.text()函数,将文件先load进来,然后再使用d3.csv.parse或者d3.csv.parseRows,这样就会是同步的了。参考文末的Reference 3的实现。

解决方法4

方法4是我自己想出来的,最近几天一直在做angular和d3结合在一起的工作,我就在想能否借助angular来帮助我们完成呢?万幸,Angular中确实有这么一个函数,似乎就是为这个问题量身定做的,且解决了前面的方法都没有解决的数据后期动态变化的问题。这个函数就是 $watch 函数。

$watch列表

每当我们在视图中追踪一个事件时,会给它注册一个回调函数,然后希望在页面中触发该事件时调用这个回调函数。比如AngularJS中最令人印象深刻的双向绑定,在input中输入一个字母,有着相同ng-model的变量就会跟着input的输入而发生改变。

发生这一变化的原因是我们把UI中的输入字段绑定给了$scope.name属性,为了更新这个视图,Angular需要 追踪变化 ,是通过给$watch列表添加一个监控函数做到这一点的。

脏检查

脏检查是一个简单的过程,可归结为一个非常基础的概念:检查值是否发生了变化,而整个应用还没同步该变化。Angular会遍历$watch列表,只要有任何的值发生比变化,应用将会退回到$watch循环中,直到检测到不在发生任何变化。

$watch

$scope对象上的$watch方法会给Angular事件循环内的每个$digest调用装配一个脏检查,如果在检测到变化,Angular总是会返回$digest循环。

$watch函数本身接受两个必要参数和一个可选的参数,第一个参数是watch的对象,第二个参数是 回调函数 ,一旦watch的对象变了的时候触发;可选的参数是一个bool值,告诉Angular是否检查 严格相等 。

关于回调函数和严格相等,还有一些想说的。

回调函数

我一直是这么理解回调函数的,研究生的导师会分配给每个研究生活去干,而他自己也有自己的事情,如果给某个研究生安排的活他做好了,就过来给他说一声,导师负责汇总,将活写成论文发表出去。这其实就是回调函数工作的原理。当然导师不可能在这边等着研究生干活,自己什么都不干;或者自己什么都干了,也没研究生什么事了。

严格相等

比如有一个数组,a=【1,2,3】,后面修改了a【0】=2,在AngularJS看来,这个数组并没有发生变化,因为还是3个变量,而如果从严格意义上来说,它已经发生了变化,这就是严格相等和相等的不同,在javascript中,也有==和===的区别。

实现

写到这里,大家应该知道该怎么做了,即调用$watch函数来观测我们需要关注的data,每当发生变化的时候,就根据新的data,重新绘制图标。因此,我们最好将render的过程抽象成一个函数,方便我们后期调用。比如,我们想要观测data数组的变化,并且根据它的变化来重新绘制图片。那么我们的代码实现就应该像下面这样。

scope.$watch("data", function() {
render();
//render函数是绘制的过程,换成自己的即可。
},true);

Reference

D3.js加载csv和json数据 http://www.bubuko.com/infodetail-942138.html

d3: make the d3.csv function syncronous http://stackoverflow.com/questions/19899005/d3-make-the-d3-csv-function-syncronous

read csv/tsv with no header line in D3 http://stackoverflow.com/questions/13870265/read-csv-tsv-with-no-header-line-in-d3
《AngularJS权威教程》 

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
Jquery AJAX 框架的使用方法
Nov 03 Javascript
js对象的比较
Feb 26 Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
浅谈Javascript事件对象
Feb 05 #Javascript
js中创建对象的几种方式
Feb 05 #Javascript
js实现增加数字显示的环形进度条效果
Feb 05 #Javascript
JS实现复制内容到剪贴板功能
Feb 05 #Javascript
js实现适合新闻类图片的轮播效果
Feb 05 #Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 #Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 #Javascript
You might like
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
php常用Stream函数集介绍
2013/06/24 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
python re模块findall()函数实例解析
2018/01/19 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
关于python中导入文件到list的问题
2020/10/31 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
应届生求职信写作技巧
2013/10/24 职场文书
师范生自荐信
2013/10/27 职场文书
求职简历中个人的自我评价
2013/12/25 职场文书
购房意向书
2014/04/01 职场文书
《社戏》教学反思
2014/04/15 职场文书
导师工作推荐信范文
2014/05/17 职场文书
抗震救灾标语
2014/06/26 职场文书
党小组评议意见
2015/06/02 职场文书
我的生日感言
2015/08/03 职场文书
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL