D3 v4でのGeoJsonファイルのレンダリングが正しくスケーリングされていない

Question

GeoJSONデータを使用してオーバーレイで地図をレンダリングしようとしています。 QGISとmapshaperにデータをロードし、正しくレンダリングしました。しかし、私のJavaScriptコードは、私が期待するものをレンダリングしていません（全体SVGが、私はそれがスケーリングの問題だと思う作り、中に満たされている。）

私はスケールを計算するための私のコードは正確であると信じています。

var bounds = path.bounds(us), 
     scale = .95/Math.max((bounds[1][0] - bounds[0][0])/width, (bounds[1][1] - bounds[0][1]) /height), 
     translation = [(width - scale * (bounds[1][0] + bounds[0][0]))/2, (height - scale * (bounds[1][1] + bounds[0][1]))/2]; 

サンプルプロジェクトをplanker https://plnkr.co/edit/jzXRaOs2xXpZuJraMq3pにアップロードしました。

期待される結果は以下のようになります

：

Answer 1

問題あなたにGeoJSONにある：このデータは、データを投影さ

... coordinates":[[[1983816.6475302426,681422.0990409602], ... 

、それはそれは座標の2次元のデカルトシステムを使用しています。 D3投影は、緯度の長い対（3次元地球上の点）を使用し、東西180度以下、北/南90度以下の値を使用します。 D3でロングペアを発生させる特定の楕円体はWGS84データで定義されています。 D3は地理データがこの座標空間内に位置することを期待している。

質問で参照した自動スケーリング機能を使用する場合、WGS84に入るようにデータを再投影する必要があります（または、この空間参照を既に使用している米国のgeojsonを見つける必要があります）システム）。このようmapshaperなどのツールは、（あなたがあなたのデータは、任意の変換を適用する前に使用するもの、空間参照系を指定する必要があるかもしれませんが）、オンラインデータを変換することができます。

もう1つの方法は、既に投影されたデータを拡大縮小するためにgeoTransform（を入力します）を使用することです。あなたのデータはすでにデカルト平面上で2次元であるので、単純にあなたのsvg座標空間に合わせてスケーリングする関数を作成することができます。私はこれのオートスケーリング機能については考えていませんが、可能でなければなりません。 geo.transformの例は、（同様の地理的特徴のセットを用いて）ここに発見された：

https://bl.ocks.org/andrew-reid/496078bd5e37fd22a9b43fd6be84b36b

mapshaperとQGISは、複数の異なる空間参照システムを予想としての投射である場合（、それらは通常、このデータを表示しますデータで指定された、または他のプラットフォームではなく、すべてのデータは）緯度長い対であると仮定D3突起、で動作するように見えるかもしれない理由は単純X、Yデータ、など。