как отображать точки данных из файла csv на карте google dd

Question

Я пытаюсь отобразить некоторые точки данных в файле csv на карте Google, используя d3 на моем отзывчивом веб-сайте. Карта google отображается как ожидалось и работает отлично, однако точки данных не отображаются, кто-нибудь может помочь? :(

<script type="text/javascript"> 
     // Create the Google Map…   
     var map = new google.maps.Map(d3.select("#map").node(), { 
      zoom: 7, 
      center: new google.maps.LatLng(51.5000, 0.1167), 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
     }); 

     // Load the station data. When the data comes back, create an overlay. 
     d3.json("stations.json", function(data) { 
      var overlay = new google.maps.OverlayView(); 

      // Add the container when the overlay is added to the map. 
      overlay.onAdd = function() { 
      var layer = d3.select(this.getPanes().overlayLayer).append("div") 
       .attr("class", "stations"); 

      // Draw each marker as a separate SVG element. 
      // We could use a single SVG, but what size would it have? 
      overlay.draw = function() { 
       var projection = this.getProjection(), 
        padding = 10; 

       var marker = layer.selectAll("svg") 
        .data(d3.entries(data)) 
        .each(transform) // update existing markers 
       .enter().append("svg:svg") 
        .each(transform) 
        .attr("class", "marker"); 

       // Add a circle. 
       marker.append("svg:circle") 
        .attr("r", 4.5) 
        .attr("cx", padding) 
        .attr("cy", padding); 

       // Add a label. 
       marker.append("svg:text") 
        .attr("x", padding + 7) 
        .attr("y", padding) 
        .attr("dy", ".31em") 
        .text(function(d) { return d.key; }); 

       function transform(d) { 
       d = new google.maps.LatLng(d.value[1], d.value[0]); 
       d = projection.fromLatLngToDivPixel(d); 
       return d3.select(this) 
        .style("left", (d.x - padding) + "px") 
        .style("top", (d.y - padding) + "px"); 
       } 
      }; 
      }; 

      // Bind our overlay to the map… 
      overlay.setMap(map);  

      // Plot data points from .csv file 
     d3.csv("data/data.csv", function(csv) { 

      d3.selectAll("circle") 
       .data(csv) 
       .enter() 
       .append("circle") 
       .attr("cx", function(d) { 
        return projection([d.lat, d.lon])[0]; 
       }) 
       .attr("cy", function(d) { 
        return projection([d.lat, d.lon])[1]; 
       }) 
       .attr("r", 5) 
       .style("fill", "red") 
       .style("opacity", 0.90);    
     }); 
     }); 

    </script>` 

Answer 1

Этот скрипт работает для меня в прошлом ...

// Create the Google Map… 
var map = new google.maps.Map(d3.select("#map").node(), { 
    zoom: 6, 
    center: new google.maps.LatLng(29.6520, -82.3250), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var data = {% raw said %}; 

// Load the station data. When the data comes back, create an overlay. 
    var overlay = new google.maps.OverlayView(); 

    // Add the container when the overlay is added to the map. 
    overlay.onAdd = function() { 
    var layer = d3.select(this.getPanes().overlayLayer).append("div") 
     .attr("class", "stations"); 

    // Draw each marker as a separate SVG element. 
    // We could use a single SVG, but what size would it have? 
    overlay.draw = function() { 
     var projection = this.getProjection(), 
      padding = 30; 

    var marker = layer.selectAll("svg") 
     .data(d3.entries(data)) 
     .each(transform) // update existing markers 
     .enter().append("svg:svg") 
     .each(transform) 
     .attr("class", "marker"); 


    //Create color Scale 
    var cScale = d3.scale.linear() 
        .domain([0, d3.max(d3.entries(data), function(d) { return d.value['Status_count']; })]) 
        .range(["orange","yellow"]);   

    //Create radius Scale 
    var rScale = d3.scale.linear() 
        .domain([0, d3.max(d3.entries(data), function(d) { return d.value['Status_count']; })]) 
        .range([5, 15]);   

    // Add a circle. 
    marker.append("svg:circle") 
     .transition() 
     .delay(1000) 
     .attr("r", function(d) {return rScale(d.value['Status_count']);})   
     .attr("cx", padding) 
     .attr("cy", padding) 
     .attr('opacity', 0.75) 
     .attr("fill", function(d) {return cScale(d.value['Status_count']);}); 


    // Add a label. 
    marker.append("svg:text") 
    .transition() 
    .delay(1000) 
    .attr("x", padding + 1) 
    .attr("y", padding) 
    .attr("dy", ".31em")    
    .text(function(d) { return d.value['Status_count']; }); 

    function transform(d) { 
    d = new google.maps.LatLng(d.value['LAT'], d.value['LON']); 
    d = projection.fromLatLngToDivPixel(d); 
    return d3.select(this) 
     .style("left", (d.x - padding) + "px") 
     .style("top", (d.y - padding) + "px"); 
    } 


    }; // overlay.draw 
    }; // overlay.onAdd 

// Bind our overlay to the map… 
overlay.setMap(map);