javascript - d3.json 不会立即执行，而是稍后执行

Question

所以我在绘制 d3 图时遇到了并发问题。我的页面在一张图表上运行得很好，但在处理多张图表时却遇到了问题。这是获取json的相关代码。

        json_fetching_id = "json/";
        json_fetching_id += json_ids.splice(0, 1);
        //here is where the d3 is grabbing the json file.
        d3.json(json_fetching_id, function(error, json){
            if (error) return console.warn(error);
            results = results.concat(json);
            callback(results); //the callback function draws the graphs.
         });
        console.info("Retrieving JSON file " + id);

如果我在回调函数中有一个断点，代码会正确执行并显示多个图形的预期显示，这让我相信这是一个并发问题。

上面的函数在 for 循环中被调用到我需要绘制图表的每个数据条目。我担心的是，在调试时，调试器会跳过 d3.json 调用，而不执行回调函数。它遍历整个 for 循环，不执行回调，然后在 for 循环完成后执行 d3.json 调用 -> 我认为这就是并发问题的根源。所以我的问题是，有没有办法确保在进入 for 循环中的下一项之前执行 d3.json 及其回调，而不是在最后全部执行？

Answer 1

浏览器检索 JSON 文件后，回调函数异步执行。同时，您的 for 循环将继续。这是预期的行为。您需要推迟执行，直到所有 文件都已检索完毕。根据您的偏好以及可用的库，您可以使用任何 Promises 库或 jQuery $.Deferred。如果您想坚持 D3.js 生态系统，Mike Bostock 发布了 queue.js库正是用于此目的。该库的 README.md 包含一个恰好适合您的用例的示例。