d3.jsグローバルマップの設定点

Question

私の主な問題は、マップ内にポイントを描画しようとすると、cxを作成するときに、それがヌルとして表示されますが、チェックすると、パッチ私の視点からは正しいです。

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

へのリンクは、私が投影せずにaswellしようとしているが、結果は同じですが、ヌルが、私がしなければですconsole.log（）私は期待している結果を得ました。多分私はここで何かを誤解しているでしょう、私がd3で地図を描くのは初めてです。

Answer 1

geometryオブジェクトとそれに付随するgeometry.coordinatesオブジェクトを含まないJSONファイルにいくつかのエントリがあり、スクリプトが失敗するようです。私の代わりに、単純に次有するのでつまり、あなたが唯一の彼らの地理が定義座標たノードを処理していることを確認するために、.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" 
    }); 
});