d3 v4中心和旋轉投影

我正在製作威斯康辛州的靜態互動地圖。d3 v4中心和旋轉投影

我使用阿爾伯斯等積圓錐投影和我都試過.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) 

}

這裏是什麼樣子：

來源

2017-10-06 Casey

你走不進你如何調用不同的方法的細節，但這裏有一個如何與他們合作的幾個一般提示：

fitExtent或短手版fitSize建議立即進行刪除如果您沒有應用任何其他轉換，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之前，旋轉地圖。作爲一般的經驗法則，您應該在縮放和擬合地圖之前應用球面變換（稍後我會進行更詳細的解釋）。

這應該留給你一個很好的旋轉，並配狀態：

來源

2017-10-06 18:52:07 zinfandel

d3 v4中心和旋轉投影

回答

相關問題