如何使用墨卡托投影在 D3 地图上绘制气泡

Question

我在D3中用墨卡托投影制作了一张世界地图，并试图绘制圆圈/气泡，但它们没有显示在地图上。我对地图的路径使用与圆圈相同的投影来计算 cx 和 cy 投影，但在下面的代码中出现以下错误：

未捕获的类型错误： 无法读取 null 的属性"坐标">

  var margin = {top: 20, right: 20, bottom: 20, left: 20};  
  var w = 1100 - margin.left - margin.right;
  var h = 900 - margin.top - margin.bottom;
  var svg = d3.select("#chart")
              .append("svg")
                .attr("width", w + margin.left + margin.right)
                .attr("height", h + margin.top + margin.bottom)
              .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var meteorsData = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json";
var geoData = "https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json";
var geo = {};
var meteors = {};
d3.json(geoData, function(data){
//load world map data  
   geo = data.features;
   d3.json(meteorsData, function(data){
        meteors = data.features;
        var projection = d3.geo.mercator()
                     .scale(150)
                     .translate([w/2, h/2]);
        var path = d3.geo.path()
                     .projection(projection);
        svg.selectAll("path")
            .data(geo)
            .enter()
            .append("path")
            .attr("fill", "#95E1D3")
            .attr("stroke", "#34495e")
            .attr("stroke-width", 0.5)
            .attr("class", "countries")
            .attr("d", path);
        svg.selectAll(".circles")
           .data(meteors)
           .enter()
           .append("circle")
           .attr("cx", function(d){ return projection(d.geometry.coordinates)[0]})
           .attr("cy", function(d){ return projection(d.geometry.coordinates)[1]})
           .attr("r", 10)
           .attr("fill", "ccc");
            })
})

有人可以帮助我吗？谢谢

Answer 1

所以在你使用的数据中 https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json
有一个数据点没有几何图形，导致错误

{
    "type": "Feature",
    "geometry": null,
    "properties": {
      "mass": "2250",
      "name": "Bulls Run",
      "reclong": null,
      "geolocation_address": null,
      "geolocation_zip": null,
      "year": "1964-01-01T00:00:00.000",
      "geolocation_state": null,
      "fall": "Fell",
      "id": "5163",
      "recclass": "Iron?",
      "reclat": null,
      "geolocation_city": null,
      "nametype": "Valid"
    }
},  

因此，如果您在cx中检查并cy应该解决问题的功能：

.attr("cx", function(d){ 
    if (d.geometry){
        return projection(d.geometry.coordinates)[0];
    }
})
.attr("cy", function(d){ 
    if (d.geometry) { 
        return projection(d.geometry.coordinates)[1];
    }
})  

在这里工作代码笔 http://codepen.io/anon/pen/xgjrmR