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

发现问题

在使用d3.js时，我们经常使用d3.csv()或d3.json()函数从文件中读取数据。不幸的是，有时候代码的结果并不是我们所期望的。我习惯了程序化编程，一开始也是这样。最头疼的是javascript不会告诉你问题出在哪里。当我第一次遇到这个问题时，我搜索了很长时间的bug，在确定代码的主要部分没有问题后，我只能开始使用console.log()将变量一个一个地输出到控制台。

我第一次遇到这个问题时的画面是这样的：

问题出在72线和75线。中间几行根本不操作ordertxt，但最终结果与预期输出不一致。后来，我们找到了解决这个问题的另一种方法。今天遇到类似的问题，我们决定拔掉这根刺。

试验

\script\console.log('在csv1之前')；d3.csv('flowers.csv '，函数(数据){console.log(数据)})；console.log('在csv2之前')；d3.csv('flowers.csv '，函数(错误，data2) {console.log(错误，data 2)})；\/script \信不信由你，由于javascript的异步特性，上面的代码将产生下图中的输出。说到异步，大部分时候会让人开心，但偶尔也会让人头疼，至少在这里，是头疼。

变通方法1

当我第一次遇到这个问题时，我巧妙地规避了这个问题。我用的方法是：我把数据处理放在d 3 . CSV(“flowers . CSV”，function(data){ deadlutata()……})回调函数中，让数据处理和d3文件读取操作变成了一根绑在同一根绳子上的蚂蚱，要么一起完成，要么两者都完成看似世界和平，但今天下午又出现了这个问题，数据随时随地都在变化，不像上次那样，所有会发生的变化都可以提前用代码写出来。于是我开始寻找解决办法。

变通办法2

第二种方法是使用一些助手类库(queue.js)来强制数据在加载后触发相应的操作。这个方法我在网上看到过，但是我自己没有尝试过，可能会成功。但是对于我们将要改变的数据，我们不能提前写出处理逻辑，这种方法还是不合格的。

变通办法3

第三种方法是堆栈溢出。试试也可以。他首先使用d3.text()函数加载文件，然后使用d3.csv.parse或d3.csv.parseRows，这样它将被同步。参见文章末尾参考文献3的实施。

解决方案4

方法4是我自己的想法。最近几天一直在研究angular和d3的组合。不知道能不能帮帮我们棱角分明。好在Angular中有这样一个函数，似乎是为这个问题量身定做的，解决了后期数据动态变化的问题，这是以前的方法都没有解决的。这个函数就是$watch函数。

$观察列表

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

这种变化的原因是我们将用户界面中的输入字段绑定到$scope.name属性。为了更新这个视图，Angular需要跟踪这个变化，这是通过在$watch列表中添加一个监控功能来实现的。

脏支票

脏检查是一个简单的过程，可以总结为一个非常基本的概念：检查值是否发生了变化，但是整个应用程序没有同步变化。Angular将遍历$watch列表，只要任何值发生变化，应用程序就会返回到$watch循环，直到检测到没有发生变化。

$手表

$scope对象上的$watch方法将为Angular事件循环中的每个$digest调用组装一个脏检查，如果检测到更改，Angular将始终返回到$digest循环。

$watch函数本身接受两个必要参数和一个可选参数。第一个参数是watch的对象，第二个参数是回调函数，一旦watch的对象发生变化就会被触发；可选参数是一个布尔值，它告诉Angular是否检查严格相等。

回调函数和严格相等还是有话要说的。

回叫功能

我一直是这样理解回调函数的。研究生的导师会分配到每个研究生活中，他有自己的事情。如果他完成了分配给研究生的工作，他会来告诉他。导师负责将作品总结发表为论文。回调函数实际上就是这样工作的。当然，导师等不及研究生来这里工作，他什么都不做；或者我什么都自己做了，和研究生没有关系。

严格相等

比如有一个数组，A=[1，2，3]，后面修改A [0]=2。在AngularJS看来，这个数组没有改变，因为它仍然是三个变量，但是如果严格意义上改变了，这就是严格相等和等式的区别。在javascript中，==和===之间也有区别。

实现

此时，每个人都应该知道该怎么做，即调用$watch函数来观察我们需要关注的数据，每当新数据发生变化时，就根据新数据重新绘制图标。所以最好把渲染的过程抽象成一个函数，方便我们以后调用。比如我们要观察数据数组的变化，根据它的变化重新绘制图片。那么我们的代码实现应该是这样的。

范围。$watch('data '，function(){ render()；//render函数是一个绘图过程，所以可以改成自己的。}，真)；参考

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

d3:使d3.csv函数同步http://stackoverflow.com/questions/19899005/D3-使-D3-CSV-函数同步

在D3 http://stackoverflow.com/questions/13870265/read-CSV-tsv-with-no-header-line-in-D3 《AngularJS权威教程》中读取无标题行的csv/tsv

摘要

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流。