geojsonファイルを解析した後、ブラウザで地図が表示されないのはなぜですか？

Question

私はドバイのすべての地区を示す巨大なgeojsonを持っています。ここではサンプルです：

{ 
    "type":"FeatureCollection", 
    "totalFeatures":224, 
    "features":[ 
     { 
      "type":"Feature", 
      "id":"Community.1", 
      "geometry":{ 
       "type":"MultiPolygon", 
       "coordinates":[ 
        [ 
         [ 

          [ 
           55.16945847438926, 
           25.03005371689898 
          ], 
          [ 
           55.168575711653915, 
           25.03074785219016 
          ], 
          [ 
           55.169258376227525, 
           25.03150691074316 
          ], 
          [ 
           55.169931129543535, 
           25.032274981961805 
          ], 

         ] 
        ] 
       ] 
      }, 
      "geometry_name":"the_geom", 
      "properties":{ 
       "COMM_CODE":684, 
       "NAME_AR":"البرشاء الجنوب الخامسة", 
       "NAME_EN":"AL BARSHA SOUTH FIFTH", 
       "AREA_ID":442, 
       "SHAPE_AREA":2951425.95614, 
       "SHAPE_LEN":10871.405155 
      } 
     }, 
     { 
      "type":"Feature", 
      "id":"Community.2", 
      "geometry":{ 
       "type":"MultiPolygon", 
       "coordinates":[ 
        [ 
         [ 
          [ 
           55.34592943407097, 
           25.16925511754935 
          ], 

          [ 
           55.34604885385063, 
           25.17297434345408 
          ], 
          [ 
           55.34600905862783, 
           25.171854965446766 
          ], 
          [ 
           55.345979182892805, 
           25.170726559094064 
          ], 
          [ 
           55.34592943407097, 
           25.16925511754935 
          ] 
         ] 
        ] 
       ] 
      } 

私はにGeoJSONを解析し、ブラウザで表示するD3で非常に簡単なコードを、持っています。しかし、私は結果を見ることができません。

d3.json("dld.json", createMap); 

    function createMap(countries) { 
     var aProjection = d3.geo.mercator(); 
     var geoPath = d3.geo.path().projection(aProjection); 
     d3.select("svg").selectAll("path").data(countries.features) 
      .enter() 
      .append("path") 
      .attr("d", geoPath) 
      .attr("class", "countries") 
    } 

がコンソールに表示されるエラーがない：

は、ここに私のコードです。 私が間違っているところを指摘してもらえれば、私は一番感謝しています:)

Answer 1

問題は、あなたがまだマップに表示したいバウンディングボックスを設定していないということです。このため あなたはこのようなあなたの投影を拡張することができます。

var aProjection = d3.geo.mercator().scale(1000).translate([-1000, 1000]); 

入力された値は一例です。残念ながらこれを設定するのは非常に面倒です。あなたがここに見ることができ、正しい値を見つける方法の詳細については：

d3js scale, transform and translate