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 相关文章推荐
javascript cookie解码函数(兼容ff)
Mar 17 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
iview table高度动态设置方法
Mar 14 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
vue实现中部导航栏布局功能
Jul 30 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
JavaScript嵌入百度地图API的最详细方法
Apr 16 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
浅谈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使用Cookie实现和用户会话的方法
2015/01/21 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
JS 文件传参及处理技巧分析
2010/05/13 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
基于Python快速处理PDF表格数据
2020/06/03 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
2014年大学生工作总结
2014/11/20 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
领导离职感言
2015/08/03 职场文书