d3.js在地图上用不同文件上的坐标绘制机场地图点

Question

我想在d3.js 中的地图上绘制美国机场

源文件是csv文件，其中只有机场代码，例如LAX或JFK。坐标位于不同的json文件中。我正在使用函数plot_airports，我的问题是如何将带有坐标的机场代码连接到数据变量中。

function plot_airports(data) {
svg.append('g')
.attr("class", "airports")
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr('cx', function(d) {return projection([d.lon,d.lat])[0]; })
.attr('cy', function(d) {return projection([d.lon,d.lat])[1]; })
.attr('r', 5)

读取机场代码的功能如下：

d3.csv("sample.csv",function(d) {
return d["airport"];
});

还有机场：

d3.json("airports.json"); 

我试图将每个函数的结果保存到变量中，然后将它们与机场代码作为关键字连接起来，但结果变量是空的。

谢谢你的帮助！

Answer 1

d3.csv函数不会返回可分配给变量的可用值。也就是说，你不能做：

var foo = d3.csv("sample.csv",function(d) {
return d["airport"];
});

这根本不起作用。

解决方案是嵌套两个异步函数：

d3.json("airports.json", function(dataCoordinates) {
//get the airports coordinates in an array named 'dataCoordinates'
d3.csv("sample.csv", function(dataCodes) {
//get the airports codes in an array named 'dataCodes';
//create your circles accessing both arrays, or join the arrays
//using the airport code as key.
});
});