d3.geoPath（）の投影を文書化されていないように設定する

Question

私はD3で多くのマップを作成しましたが、出力がそれほど小さくないこの問題はありませんでした。小さなgeojsonファイルが含まれていますが、他のさまざまなツール（e.g. here）を使用して簡単に表示できます。

投影がd3.geoPath（）で正しく設定されていないようです。 The APIは、d3.geoPath（）が投影引数をとることを指定していますが、このメソッドを使用して投影を設定しようとすると（下の例のように）、結果のマップは正しく投影されません。 d3.geoPath（）。projection（）メソッドを使用して投影を設定した後で、適切な結果が得られます。

これはドキュメントに記載されているエラーですか？何か不足していますか？

//setup and map parameters 
 
var height = 300; 
 
var width = 300; 
 
var projection = d3.geoAlbers().scale(1000).translate([width/2, height/2]); 
 
var path = d3.geoPath(projection); 
 

 
//geoJSON data 
 
var geojson = 
 
{"type":"FeatureCollection","features":[ 
 
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-86.910592,33.536105],[-86.907192,33.542204999999996],[-86.90539199999999,33.541305],[-86.901608,33.543456],[-86.895692,33.548805],[-86.89249199999999,33.550404],[-86.888392,33.549304],[-86.879772,33.553267999999996],[-86.868549,33.553418],[-86.8651,33.557134999999995],[-86.856129,33.562064],[-86.85159499999999,33.559404],[-86.848891,33.559805],[-86.852991,33.552104],[-86.85519099999999,33.543904999999995],[-86.855694,33.538151],[-86.860817,33.53405],[-86.850509,33.535693],[-86.83124699999999,33.544767],[-86.827029,33.534708],[-86.82383999999999,33.533389],[-86.826703,33.528081],[-86.826807,33.521107],[-86.822808,33.514319],[-86.81474899999999,33.502386],[-86.81411899999999,33.500078],[-86.816041,33.496234],[-86.823825,33.488839],[-86.825743,33.485408],[-86.82772299999999,33.477393],[-86.828558,33.472626999999996],[-86.82791,33.46967],[-86.833503,33.467552999999995],[-86.839366,33.463845],[-86.841534,33.460941],[-86.842309,33.465699],[-86.849758,33.466302],[-86.861663,33.456759],[-86.869367,33.4514],[-86.87749699999999,33.449382],[-86.884293,33.445453],[-86.88948599999999,33.441072999999996],[-86.890131,33.438437],[-86.899491,33.434508],[-86.908391,33.429308],[-86.922929,33.415512],[-86.925484,33.419897999999996],[-86.93114299999999,33.422801],[-86.93749199999999,33.421608],[-86.945352,33.425982999999995],[-86.946468,33.428407],[-86.937809,33.435314],[-86.925764,33.449968999999996],[-86.920859,33.454651999999996],[-86.92215,33.456643],[-86.927679,33.453849999999996],[-86.932965,33.449332],[-86.935435,33.446132],[-86.94133699999999,33.442150999999996],[-86.941301,33.445651999999995],[-86.942842,33.450103],[-86.946817,33.45017],[-86.95131599999999,33.45181],[-86.950279,33.458104],[-86.945494,33.463234],[-86.929693,33.478538],[-86.92935299999999,33.479858],[-86.920255,33.492874],[-86.92450699999999,33.493904],[-86.93110999999999,33.496843],[-86.933543,33.494935999999996],[-86.94144999999999,33.494743],[-86.944717,33.495934],[-86.946237,33.502279],[-86.946224,33.506071],[-86.941811,33.507621],[-86.937693,33.512206],[-86.92634,33.512381999999995],[-86.917255,33.517139],[-86.915435,33.519832],[-86.908779,33.518958999999995],[-86.903385,33.516537],[-86.898659,33.520165999999996],[-86.894459,33.526136],[-86.896992,33.530504],[-86.910592,33.536105]]]},"properties":{"a":1}} 
 
]} 
 

 
var svg = d3.select("#map"); 
 
svg.selectAll("path").data(geojson.features).enter().append("path").attr("fill","red").attr("d", path);

<script src="https://d3js.org/d3.v4.min.js"></script> 
 

 
<svg height="300px" width="300px" id="map"> </svg>

Answer 1

あなたは正しく投影パラメータを設定する必要があります。あなたの例のように小さな領域を表示するには、1000倍のスケール係数が小さくなります。 50 000のスケール係数がより適切かもしれません。また、マップを適切に中央に配置する必要があります。

マップの中心を正しく配置するには、フィーチャーの中心付近にポイントを見つける必要があります。これを手動で行うには、Google Earthや他の方法を使用して地理座標で経路重心を見つけることができます（ただし、svg座標ではありませんが、svg重心を見つけると投影を精緻化することができます）私の答えでは）。アルバース投影して

あなたはy軸を中心とx軸を中心に回転する必要があります

var projection = d3.geoAlbers() 
    .rotate([-x,0]) 
    .center([0,y]) 
    .scale(k) 
    .translate([width/2,height/2]) 

あなたがマップの下で地球を回転させるので、あなたの中央子午線のマイナスを使用します。 Albersパラメータの詳細なグラフィックについては、this answerを参照してください。

d3のAlbers投影には、デフォルトの中心座標と回転座標があります。中心座標を回転と中心の両方で設定しないと、マップは米国全体を表示するためのデフォルトパラメータを保持します。意図した投影が変更されます。他の予測は、デフォルトで[d3]の[0,0]に中心を置いています。これはアフリカの海岸から外れています。

Googleプロジェクションで使用するGoogle Earthを使用してセンター座標を視覚化しました。私はここで使用していますセンタリング点は次のとおりです。

//setup and map parameters 
 
var height = 300; 
 
var width = 300; 
 
var projection = d3.geoAlbers() 
 
    .scale(100000) 
 
    .translate([width/2, height/2]) 
 
    .rotate([86.884,0]) 
 
    .center([0,33.507]); 
 
var path = d3.geoPath(projection); 
 

 
//geoJSON data 
 
var geojson = 
 
{"type":"FeatureCollection","features":[ 
 
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-86.910592,33.536105],[-86.907192,33.542204999999996],[-86.90539199999999,33.541305],[-86.901608,33.543456],[-86.895692,33.548805],[-86.89249199999999,33.550404],[-86.888392,33.549304],[-86.879772,33.553267999999996],[-86.868549,33.553418],[-86.8651,33.557134999999995],[-86.856129,33.562064],[-86.85159499999999,33.559404],[-86.848891,33.559805],[-86.852991,33.552104],[-86.85519099999999,33.543904999999995],[-86.855694,33.538151],[-86.860817,33.53405],[-86.850509,33.535693],[-86.83124699999999,33.544767],[-86.827029,33.534708],[-86.82383999999999,33.533389],[-86.826703,33.528081],[-86.826807,33.521107],[-86.822808,33.514319],[-86.81474899999999,33.502386],[-86.81411899999999,33.500078],[-86.816041,33.496234],[-86.823825,33.488839],[-86.825743,33.485408],[-86.82772299999999,33.477393],[-86.828558,33.472626999999996],[-86.82791,33.46967],[-86.833503,33.467552999999995],[-86.839366,33.463845],[-86.841534,33.460941],[-86.842309,33.465699],[-86.849758,33.466302],[-86.861663,33.456759],[-86.869367,33.4514],[-86.87749699999999,33.449382],[-86.884293,33.445453],[-86.88948599999999,33.441072999999996],[-86.890131,33.438437],[-86.899491,33.434508],[-86.908391,33.429308],[-86.922929,33.415512],[-86.925484,33.419897999999996],[-86.93114299999999,33.422801],[-86.93749199999999,33.421608],[-86.945352,33.425982999999995],[-86.946468,33.428407],[-86.937809,33.435314],[-86.925764,33.449968999999996],[-86.920859,33.454651999999996],[-86.92215,33.456643],[-86.927679,33.453849999999996],[-86.932965,33.449332],[-86.935435,33.446132],[-86.94133699999999,33.442150999999996],[-86.941301,33.445651999999995],[-86.942842,33.450103],[-86.946817,33.45017],[-86.95131599999999,33.45181],[-86.950279,33.458104],[-86.945494,33.463234],[-86.929693,33.478538],[-86.92935299999999,33.479858],[-86.920255,33.492874],[-86.92450699999999,33.493904],[-86.93110999999999,33.496843],[-86.933543,33.494935999999996],[-86.94144999999999,33.494743],[-86.944717,33.495934],[-86.946237,33.502279],[-86.946224,33.506071],[-86.941811,33.507621],[-86.937693,33.512206],[-86.92634,33.512381999999995],[-86.917255,33.517139],[-86.915435,33.519832],[-86.908779,33.518958999999995],[-86.903385,33.516537],[-86.898659,33.520165999999996],[-86.894459,33.526136],[-86.896992,33.530504],[-86.910592,33.536105]]]},"properties":{"a":1}} 
 
]} 
 

 
var svg = d3.select("#map"); 
 
svg.selectAll("path").data(geojson.features).enter().append("path").attr("fill","red").attr("d", path);

<script src="https://d3js.org/d3.v4.min.js"></script> 
 

 
<svg height="300px" width="300px" id="map"> </svg>

：ここで100 000ではなく1 000使用

86.884 degrees West (-86.884 degrees East) 
33.507 degress North 

私はまた、あなたのオリジナルのズーム倍率よりもはるかにさらにズームインは、あなたのデータを示す投影であります