結合geojson和csv，然後使用新數據來設計地圖樣式

Question

我正在嘗試編寫一個通用地圖，以便任何新的csv都會更改數據可視化。我能夠繪製地圖，使用geojson加入csv，甚至在mouseover上打印csv數據。但是，當我嘗試使用這些數據將顏色應用於地圖時，我始終得到undefined - 我猜是由於js的異步性質。我怎樣才能最有效地解決這個問題？

這裏是我的代碼：

// Community colors 
var comm_colors = [ "red", "blue", "green", "yellow", "purple" ]; 

// CSV 
function parse_add_csv(cts){ 

    var new_cts = cts 
    console.log('parsing csv'); 
    d3.csv("data/communities.csv", function(comms) 
     { csv = comms.map(function(d) 
      { 

       return {"community": d.community, "label": d.BoroCT2010} ; 
      }) 

      csv.forEach(function(d, i) { 
      new_cts.forEach(function(e, j) { 
      if (d.label === e.properties.BoroCT2010) { 

       e.properties.community = parseInt(d.community) 
       } 
      }) 
      }) 
    }) 
    return new_cts 
    } 


d3.json("data/nyct2010_17a3_topo.json", function(error, nyb) { 
    console.log('tracts uploaded, v3') 

    var ctss = topojson.feature(nyb, nyb.objects.nyct2010_17a3).features; 
    ctss = parse_add_csv(ctss); // match data from csv by BoroCT2010 

    cts.selectAll(".tract") 
     .data(ctss) 
     .enter().append("path") 
     .attr("class", "tract") 
     .attr("d", path) 
     .attr("id", function(d) { 
     return d.properties.BoroCT2010;}) 
     .attr("nhd_name", function(d) { 
     return d.properties.NTAName;}) 
     .style('fill', function(d){ 
      console.log(comm_colors[d.properties.community]) 
      return comm_colors[d.properties.community];}) 
     .on("mouseover", handleMouseOver) 
     .on("mouseout", handleMouseOut) 
     .style('fill', function(d) {return 
      comm_colors[d.properties.community]}); 
}) 

在這裏，我想從CSV匹配的社區列到GeoJSON的，然後用它來從列表中選擇一種顏色。它完美，當我打印彩色的鼠標懸停事件，但鏈中不起作用：

.style('fill', function(d){ 
       console.log(comm_colors[d.properties.community]) 
       return comm_colors[d.properties.community];}) 

Answer 1

你的猜測是，只是部分正確：

我得到了一個未定義所有的時間 - 我猜，由於js的異步性質。

有沒有「的JS異步特性」。 JavaScript始終是同步和單線程的。但是，AJAX調用和D3功能（例如d3.json和d3.csv）是異步的。

這就是說，有幾個解決方案。您可以使用d3.queue。最簡單的解決方案，雖然是簡單的嵌套異步功能：

d3.json("data/nyct2010_17a3_topo.json", function(error, nyb){ 
    d3.csv("data/communities.csv", function(comms){ 
     //here goes all code that uses both 'nyb' and 'comms' 
    }) 
}) 

築巢他們後，把所有的與以GeoJSON與內回調內部的CSV交易的代碼。