使用d3js v5创建地图

Question

我想使用D3js v5创建地图。 使用D3js v4我做：

d3.queue()
    .defer(d3.json, 'myfile1.json') 
   .defer(d3.csv, 'myfile2.csv') 
   .await(makeMap);

function makeMap(err, f1, f2) {
   if(err) {
      throw err;
   }
   // some code...
}

现在在v5 Mike Bostock has replaced the d3.queue with the Promise native JavaScript object，所以我尝试了：

var files = ['myfile1.json', 'myfile2.csv'];
var promises = [];

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

Promise.all(promises)
.then(makeMap());

function makeMap(err, f1, f2) {
    if(err) {
        throw err;
    }
    console.log('ok');
    console.log(f1); // undefined
    console.log(f2); // undefined
    // some code...
}

变量f1和f2都是undefined。为什么呢？

修改

感谢Gerardo的建议，我改变了我的代码：

var files = ['myfile1.json', 'myfile1.csv'];
var promises = [];

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

Promise.all(promises)
.then(makeMap(data))
.catch(function(err) {
    throw err;
});

function makeMap(data) {
    console.log(data[0]);
    console.log(data[1]);
}

错误：未定义数据。

所以我改为：

Promise.all(promises)
.then(makeMap(files))
.catch(function(err) {
    throw err;
});

function makeMap(data) {
    console.log(data[0]); // string myfile1.json not object data
    console.log(data[1]); // string myfile1.json not object data
}