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

Question

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

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

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

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

How to draw bubbles on a D3 Map with mercator projection?

javascript

data-visualization

cartography

d3.js