D3.js正在讀取Lat從csv到Google Map的長座標

Question

我正在嘗試使用D3和csv文件在Google地圖上獲取點。我似乎能夠正確讀取經緯度座標，但他們不會在地圖上的任何地方繪製。

var map = new google.maps.Map(d3.select("#map").node(), 
{ 
    zoom: 11, 
    center: new google.maps.LatLng(39.654835520000063, -105.01942651999994), 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
}); 

d3.csv("data.csv", function(error, data) 
{ 
    var overlay = new google.maps.OverlayView(); 
overlay.draw = function() { 
d3.select("circle") 
    .data(data) 
    .enter() 
    .append("circle") 
    .attr("cy", function(d) 
    { 
     return [d.longitude, d.latitude][0]; 
    }) 
    .attr("cx", function(d) 
    { 
     return [d.longitude, d.latitude][1]; 
    }) 
    .attr("r", 5) 
    .style("fill", "blue");  
} 
overlay.setMap(map); 
}); 

Answer 1

您需要設置overlay.onAdd函數。在使用有效地圖調用overlay.setMap（）後，會調用onAdd（）。如果你沒有在onAdd（）中指定要實現的任何東西（默認情況下這是一個空函數），則不會發生任何事情。因此，您應該使用onAdd來初始化DOM疊加元素。

例如，上面共享的代碼使用下面的實現： overlay.onAdd = function() { var layer = d3.select(this.getPanes().overlayLayer).append("div") .attr("class", "stations"); //more code here }

層變量是你想看看。