D3 v5中的投影不使用坐标数据

Question

我正在尝试使用D3 v5制作全球陨石登陆地图。我有地图显示。正在加载来自陨石json文件的坐标（lat，long）。我试图在.attr中使用它们来表示“cx”和“cy”。当我console.log .attr中的坐标时，它们会出现，但是当我尝试将它们传递到我的投影中以便它们在地图上正确显示时，我会收到以下错误：未捕获（在承诺中） ）TypeError：无法读取null的属性'coordinates'。

任何人都可以帮我弄清楚如何让这个工作吗？感谢您提供的任何帮助。

这是指向Codepen的链接：https://codepen.io/lieberscott/pen/QryZPR?editors=0110

我的代码：

const w = 960;
const h = 600;

const svg = d3.select(".map")
.append("svg")
.attr("height", h)
.attr("width", w);

let projection = d3.geoMercator()
.translate([w/2, h/2])
.scale(140);

const path = d3.geoPath()
.projection(projection);

let tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip");

const files = ["https://unpkg.com/world-atlas@1.1.4/world/110m.json", "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json"];

Promise.all(files.map((url) => d3.json(url))).then(function(data) {

  svg.append("g")
    .attr("class", "country")
    .selectAll("path")
    .data(topojson.feature(data[0], data[0].objects.countries).features)
    .enter().append("path")
    .attr("d", path);

  svg.selectAll(".meteor")
  .data(data[1].features)
  .enter().append("circle")
  .attr("class", "meteor")
  .attr("cx", (d) => {
    console.log(d.geometry.coordinates[0]);
    let coords = projection([d.geometry.coordinates[0], d.geometry.coordinates[1]]);
    return coords[0];
  })
  .attr("cy", (d) => {
    let coords = projection([d.geometry.coordinates[0], d.geometry.coordinates[1]]);
    return coords[1];
  })
  .attr("r", 6);
});

Answer 1

您的数据缺少某些位置的坐标，例如：

 {
    "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"
    }
  },

这会产生您看到的错误，停止附加圈子。

您可以尝试使用以下内容过滤掉它们：

svg.selectAll(".meteor")
 .data(data[1].features.filter(function(d) {
  return d.geometry;    // return only features with a geometry
}) )

给我们：

更新了笔：https://codepen.io/anon/pen/XqXQYy?editors=0110

另外，我很快就会注意到这一点：

projection([d.geometry.coordinates[0], d.geometry.coordinates[1]]);

可以简化为：

projection(d.geometry.coordinates);