javascript - 在 d3.js 全局 map 中设置点

Question

我遇到的主要问题是，当我尝试在 map 内绘制点时，在创建 cx 和 cy 坐标时，它显示为空，但是如果您检查它，从我的 Angular 来看，补丁是正确的.

    d3.json(meteorites, function(meteorite){
console.log("meteorite", meteorite.features);
svg.selectAll("circle")
.data(meteorite.features)
.enter()
 .append("circle")
.attr({
cx: function(d){ return projection(d.geometry.coordinates[0], d.geometry.coordinates[1])[0];},
 cy: function(d){ return projection(d.geometry.coordinates[0], d.geometry.coordinates[1])[1];},
 r: 5,
fill: "red"

});

如果您想查看我在这里写的内容，可以点击我的 codepen http://codepen.io/DiazPedroAbel/pen/bwoBZd 的链接。

我也在没有投影的情况下尝试过，但结果是相同的，为空，但如果我执行 console.log() 我得到了我期望的结果。可能我在这里误解了一些东西，这是我第一次在 d3 中绘制 map 。

Answer 1

JSON 文件中的某些条目似乎不包含 geometry 对象和随附的 geometry.coordinates 数组，导致脚本失败。我建议您在附加 .data() 时实现一个基本过滤器，以确保您仅处理定义了地理坐标的节点，即而不是简单地具有以下内容:

.data(meteorite.features)

...您可以使用.filter()从对象数组中清除没有geometry对象或geometry.coordinates的条目 数组定义:

.data(meteorite.features.filter(function(d) {
  return d.geometry && d.geometry.coordinates;
}))

请参阅corrected CodePen example ，更新了以下代码块:

d3.json(meteorites, function(meteorite){
    svg.selectAll("circle")
        .data(meteorite.features.filter(function(d) {
          return d.geometry && d.geometry.coordinates;
        }))
        .enter()
        .append("circle")
        .attr({
          cx: function(d){ return projection(d.geometry.coordinates)[0];},
          cy: function(d){ return projection(d.geometry.coordinates)[1];},
          r: 5,
          fill: "red"
    });
});