D3.js地圖：如何旋轉它？

我正在用d3.js製作一張菲律賓地圖，出於一個奇怪的原因，地圖看起來像左轉，所以這個國家看起來並不怎麼樣。我試圖修改projection.rotate字段，但似乎不是修正線。D3.js地圖：如何旋轉它？

 var width = 1060, 
     height = 860; 

    var svg = d3.select("body").append("svg") 
     .attr("width", width) 
     .attr("height", height) 
     .style("overflow", "auto"); 

    d3.json("ph.json", function(error, ph) { 
     if (error) return console.error(error); 

     var subunits = topojson.feature(ph, ph.objects.ph_subunits); 

     var projection = d3.geo.albers(); 
     projection.rotate([-4 ,0]); 
     projection.scale(3000); 
     projection.center([122.427150, 12.499176]); 
     projection.parallels([10, 15]) 
     projection.translate([width/2, height/2]); 

     var path = d3.geo.path() 
      .projection(projection) 
      .pointRadius(2); 
     svg.append("path") 
     .datum(subunits) 
     .attr("d", path); 

    });

這是代碼。

任何幫助將是偉大的！

謝謝！

來源

2016-10-10 Daniele Palumbo

如果您不知道潛在的轉換，Albers預測會有點棘手。

這是默認亞爾勃斯投影與其平行設置爲10和15 .parallels([10,15])，如在你的問題，和100的規模（旋轉和中心將默認爲[0,0]）：

這種形狀是由於投影的圓錐形性質。如果選擇了南部的相似點，那麼凹面就會顛倒過來。更極端的緯度/緯度會導致更大的彎曲。選擇的平行線應貫穿您感興趣的區域，因爲平行線附近的區域是失真最小的區域。

如果我們想要說的，專注於澳大利亞（我會保持平行線一樣的圖像上面演示的緣故）：

我們可以簡單地使用的地理中心澳大利亞作爲投影.projection.center([x,y])和規模的中心到適當的水平.projection.scale(1000)：

唯一的變化是澳大利亞更大，它仍然像在地圖的角落和更小的地方一樣被扭曲。它上下左右移動，然後放大，沒有其他變化。

正如您的問題所猜測的那樣，旋轉是解決顯示不在主要子午線附近的問題的解決方案。

如果我們使第一地圖（其是相同於該第二映射）由100度經度.projection.rotate([100,0])的，我們得到：

世界已經紡出100度，和一個假想線垂直穿過地圖中心與經度-100度或西經100度的子午線對齊。

如果我們感興趣的領域是中美洲（爲此，我們繼續使用並繼續使用這些平行線），那麼下一步就是沿投影中心上下移動地圖中心子午線。對於中美洲，這種轉變可能是20度：.projection.center([0,20])。通過適當的規模，比方說1000的結果是這樣的：

所以，菲律賓，使用您的中心座標[122。427150，12.499176]和相似之處，一個理想的阿爾伯斯投影可能看起來像：

 projection.rotate([-122.427150,0]) 
       .center([0,12.499176]) 
       .scale(1200) 
       .parallels([10,15]);

這對我產生了：

來源

2016-12-14 02:41:46

D3.js地圖：如何旋轉它？

回答

相關問題