在d3.js全局图中设置点

我遇到的主要问题是，当我尝试在地图内绘制点时，创建cx时，cy坐标显示为null，但如果您检查它，，从我的角度来看，这是正确的。在d3.js全局图中设置点

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中绘制地图。

来源

2016-10-01 coderHook

'projection' [需要数组]（https://github.com/d3/d3-3.x-api-reference/blob/master/Geo-Projections.md#_projection）'projection（[d .geometry.coordinates [0]，d.geometry.coordinates [1]]）' – Mark

我纠正了这个部分，但仍然有同样的问题。 – coderHook

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

.data(meteorite.features)

＆hellip;你可以使用.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" 
    }); 
});

来源

2016-10-01 22:03:27 Terry

在d3.js全局图中设置点

回答

相关问题