如何使用 d3 将 csv 文件中的数据点显示到谷歌地图

Question

我正在尝试在我的响应式网站中使用 d3 在 Google 地图上的 csv 文件中显示一些数据点。谷歌地图按预期显示并且工作正常但是没有显示数据点有人可以帮忙吗？ :(

   <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);