geojsonファイルを特定のマップに設定しようとしています

私はカナダの一部とメキシコのいくつかの頂点を持つ米国のビューを示すマップを設定しようとしています。私はwww.geojson.ioに、この基本的な撮影をしました：geojsonファイルを特定のマップに設定しようとしています

http://geojson.io/#id=gist:anonymous/b2f65ddc2a28013b0c9c7ecab5d7427f&map=4/39.37/-97.16

にはどうすれd3.jsを使用してブラウザマップでこれを表示することができますか？

https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-110m.json

ここで私はようにGeoJSONを表示するために使用していD3コードがあります：私は、一般的に使用されるにGeoJSONファイルのようです世界-110m.jsonを使用して、世界のブラウザマップを表示することができますよブラウザのマップ：

d3.json("json/world-110m.json", function (error, topology) { 
    if (error) return console.warn(error); 
    g.selectAll("path") 
     .data(topojson.object(topology, topology.objects.countries) 
      .geometries) 
    .enter() 
     .append("path") 
     .attr("d", path) 
});

世界-110m.jsonは、私はちょうど上記の私のgeojson.ioマップに写る範囲の平面の地図を表示する必要があるので、私は必要としない追加情報をたくさん持っているようです。私はgeojsonを構築したり、私のd3コードを更新したりする必要がありますか？

出典

2016-09-07 user6806234

私はgeojson.ioが何をしているのか分かりませんが、geojsonが返すもの（2つの同一のポリゴン）は、選択したものと似ているとは思われません。それは価値がある何のため

、ここでそのgeojsonから「マップ」です：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    var geoJson = { 
 
     "type": "FeatureCollection", 
 
     "features": [{ 
 
     "type": "Feature", 
 
     "properties": {}, 
 
     "geometry": { 
 
      "type": "Polygon", 
 
      "coordinates": [ 
 
      [ 
 
       [-129.0234375, 
 
       23.160563309048314 
 
       ], 
 
       [-129.0234375, 
 
       52.53627304145948 
 
       ], 
 
       [-65.302734375, 
 
       52.53627304145948 
 
       ], 
 
       [-65.302734375, 
 
       23.160563309048314 
 
       ], 
 
       [-129.0234375, 
 
       23.160563309048314 
 
       ] 
 
      ] 
 
      ] 
 
     } 
 
     }, { 
 
     "type": "Feature", 
 
     "properties": {}, 
 
     "geometry": { 
 
      "type": "Polygon", 
 
      "coordinates": [ 
 
      [ 
 
       [-129.0234375, 
 
       23.160563309048314 
 
       ], 
 
       [-129.0234375, 
 
       52.53627304145948 
 
       ], 
 
       [-65.302734375, 
 
       52.53627304145948 
 
       ], 
 
       [-65.302734375, 
 
       23.160563309048314 
 
       ], 
 
       [-129.0234375, 
 
       23.160563309048314 
 
       ] 
 
      ] 
 
      ] 
 
     } 
 
     }] 
 
    }; 
 

 

 
    var width = 960, 
 
     height = 600; 
 

 

 
    var projection = d3.geo.albersUsa() 
 
     .scale(500) 
 
     .translate([width/2, height/2]); 
 

 

 
    var path = d3.geo.path() 
 
     .projection(projection); 
 

 

 
    var svg = d3.select("body").append("svg") 
 
     .attr("width", width) 
 
     .attr("height", height); 
 

 
    svg.append("g") 
 
     .selectAll("path") 
 
     .data(geoJson.features) 
 
     .enter().append("path") 
 
     .attr("d", path); 
 
    </script> 
 
</body> 
 

 
</html>

出典

2016-09-07 21:24:56 Mark

権利は、私は、ファイルが再び開かれたとき、それは重複ポリゴンを追加したと思います。しかし、私はローカルのd3アプリケーションでそれを実行しようとする前に、重複ポリゴンを削除しました。地元のd3アプリで実行する前にgeojsonファイルをtopojsonに変換しました。しかし、topojson.v0.min.js：何らかの理由で「未定義のプロパティの型を読み込めません」というエラーが返されました – user6806234

jsonファイルが作成したd3 b/cの「countries」プロパティ参照を削除して、国のオブジェクトを持っている。私が探しているのは、自分のシナリオで動作する基本的なtopojsonファイルです。私は必要に応じて実装の詳細を調整することができます。 – user6806234

geojsonファイルを特定のマップに設定しようとしています

答えて

関連する問題