d3.js v5 - Promise.all取代了d3.queue

时间:2018-03-28 12:23:31

标签: d3.js promise queue

我现在一直在使用d3.js v4并且我已经了解到Mike Bostock已经使用Promise本机JavaScript对象替换了v5版本中的d3.queue。我想和你联系,看看我写的代码是否正确排队(异步)这些网址:

var makeRequest = function() {
    "use strict";

    var bli = [
        "http://stats.oecd.org/sdmx-json/data/BLI2013/all/all",
        "http://stats.oecd.org/sdmx-json/data/BLI2014/all/all",
        "http://stats.oecd.org/sdmx-json/data/BLI2015/all/all",
        "http://stats.oecd.org/sdmx-json/data/BLI2016/all/all",
        "http://stats.oecd.org/sdmx-json/data/BLI/all/all"
    ];

    var promises = [];

    bli.forEach(function(url) {
        promises.push(
            new Promise(function(resolve, reject) {
                d3
                    .json(url)
                    .then(function(response) {
                        resolve(response);
                    })
                    .catch(function(error) {
                        console.log("Error on: " + url + ". Error: " + error);
                        reject(error);
                    });
            })
        );
    });

    Promise.all(promises).then(function(values) {
        console.log(values);
    });
};

makeRequest();

代码似乎运行正常,但是,这是正确的代码还是有更好的方法(最佳实践方法)与Promise.all和d3.js排队?是否正确实施了捕获错误?

3 个答案:

答案 0 :(得分:20)

您可以大量简化该代码:您不必将new Promised3.json一起使用,因为d3.json本身会创建承诺。

所以,你可以这样做:

var files = ["data1.json", "data2.json", "data3.json"];
var promises = [];

files.forEach(function(url) {
    promises.push(d3.json(url))
});

Promise.all(promises).then(function(values) {
    console.log(values)
});

或者,如果你进入code golf,甚至更短:

var files = ["data1.json", "data2.json", "data3.json"];

Promise.all(files.map(url => d3.json(url))).then(function(values) {
    console.log(values)
});

因为我不能在S.O.中使用JSON文件。片段,检查此bl.ocks中的控制台:https://bl.ocks.org/GerardoFurtado/f08993c9c729b0b3452ef1803ad9dcbf/c4b45c5acce6033085a667cbb7d34203d15de0f0

答案 1 :(得分:0)

这是使用ES6 async functionsES6 array destructuring的方法:

async function chart() {
  const [first, second] = await Promise.all([
    d3.json('data1.json'),
    d3.json('data2.json'),
  ])
  console.log('data2.json :', second)
}

chart()

答案 2 :(得分:0)

如果您想根据自己的喜好清理数据,还可以为数据添加格式化功能。 .then()会将您的数据保存在一个不错的数组中,您以后可以使用。

const myData = d3.csv("data.csv", formatterFunction)
.then(data => /* do whatever*/ )

function formatterFunction(row){
  // do formatting
  return // formatted data
   }