d3.js csv에서 Google Map으로 Lat Long 좌표를 읽는 중

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 기능을 설정해야합니다. onAdd()는 유효한지도로 overlay.setMap()이 호출 된 후 한 번 호출됩니다. onAdd()에서 구현할 항목을 지정하지 않으면 (기본적으로 빈 함수 임) 아무 것도 발생하지 않습니다. 따라서 onAdd를 사용하여 DOM 오버레이 요소를 초기화해야합니다. overlay.onAdd = function() { var layer = d3.select(this.getPanes().overlayLayer).append("div") .attr("class", "stations"); //more code here }

계층 변수가 당신이보고 싶을 것입니다 :

예를 들어, 위의 공유 코드는 다음 구현을 사용합니다.