Question

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

未捕获的TypeError：无法读取属性＆＃39;坐标＆＃39;为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

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

1 个答案: