d3.js全局地图中的设置点

Setting points in a d3.js Global Map

本文关键字：设置 地图 js 全局 d3      更新时间：2023-09-26

我遇到的主要问题是，当我尝试在地图内绘制点时，当创建cx和cy坐标时，它显示为null，但如果你检查它，补丁，从我的角度来看，是正确的。

    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

我也一直在尝试没有投影，但结果是相同的，null，但如果我做一个console.log()我得到了我期待的结果。可能我在这里误解了什么，这是我第一次在d3中绘制地图。

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

.data(meteorite.features)

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

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

参考更正后的CodePen示例，更新了以下代码块:

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"
    });
});
相关文章：