d3 v4の中心と回転投影

Question

ウィスコンシン州の静的でインタラクティブな地図を作成しようとしています。

私はAlbers Equal Area Conic投影を使用していますが、.rotate,.center,.fitExtentを試しましたが、これらをコードに追加するたびにマップは完全に消えます。

何が起こっている可能性がありますか？

は、ここでは、コードです：

var margin = {top: 20, left: 20, bottom: 20, right: 20} 
    height = 600- margin.top - margin.bottom, 
    width = 960 - margin.left - margin.right; 

var svg2 = d3.select("#map2").append("svg") 
    .attr("height", height) 
    .attr("width", width) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.right + ")"); 

d3.queue() 
    .defer(d3.json, "WiscCountiesNoProjection.json") 
    .await(ready); 

var projection2 = d3.geoAlbers() 
    .translate([width/3, height/1]) 
    .scale(4000) 

var path2 = d3.geoPath() 
    .projection(projection2) 

function ready (error, data) { 
    var counties = topojson.feature(data, data.objects.WiscCounties).features 

    svg2.selectAll(".counties") 
    .data(counties) 
    .enter().append("path") 
     .attr("class", "counties") 
     .attr("d", path2) 

} 

そして、ここで、それは次のようになります。

Answer 1

あなたはさまざまな方法を呼んでいる方法の詳細には触れませんが、ここでは、それらを操作する方法に関する一般的なヒントをいくつか紹介します。

fitExtentまたは短針バージョンfitSize shoul d他の変換を適用していない場合は、SVGにオブジェクトを表示させてください。最小の実例は次のようになるでしょう：

const proj = d3.geoAlbers() 
     .fitSize([width, height], wisconsin) 

これは正しく回転されていますが、ウィスコンシンは正しく回転しません。そうでない場合、wisconsinは有効なGeoJSONオブジェクトではなく、FeatureCollection、単一のFeatureまたは幾何学的オブジェクトではありません。

次の質問は回転を修正する方法です。円錐投影については、わかっているように、一般的に関心のあるオブジェクトの中心を見つけ、経度の逆数だけ回転させたいと思っています。非常にフレンドリーStackOverflowのユーザは、ここで詳細を説明した：https://stackoverflow.com/a/41133970/4745643

をウィスコンシン州の場合は状態の中心がほぼ正確に-90°の経度を持っているので、我々はこれを行う：

const proj = d3.geoAlbers() 
    .rotate([90, 0, 0]) 
    .fitSize([width, height], wisconsin) 

注意、我々オブジェクトをSVGに収める前にマップを回転させます。一般的な経験則として、ズームとフィッティングの前に球面変換を適用する必要があります（詳細は後で詳しく説明します）。

：うまく回転して取り付け状態を残す必要があります