Как нарисовать пузыри на карте D3 с проекцией меркатора?

Question

Я сделал карту мира в D3 с проекцией меркатора и попытался нарисовать круги/пузыри, но они не отображаются на карте. Я использую ту же проекцию на пути к карте, как и для кругов для расчета сх и Сай проекции, но получить следующее сообщение об ошибке в мой код ниже:

Uncaught TypeError: Cannot read property 'coordinates' of 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]; 
    } 
}) 

Работая codepen здесь http://codepen.io/anon/pen/xgjrmR