2017-01-22 47 views
1

座標我想繪製美國機場在d3.js地圖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"); 

我試圖挽救每一個功能到變量的結果然後將它們與機場代碼結合爲關鍵字,但結果變量爲空。

謝謝你的幫助!

回答

0

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. 

    }); 

});