使用D3.js投影顯示地圖

我正在嘗試使用D3.js和this geoJSON文件顯示印度地圖。當我在瀏覽器中運行以下HTML文件時，地圖不會生成，控制檯上也沒有錯誤。使用D3.js投影顯示地圖

我懷疑這與投影有關，因爲當我從路徑變量中移除投影時，我會在svg的頂部獲得一張小地圖。我嘗試了墨卡託，阿爾伯斯和其他預測，但似乎沒有任何工作。

代碼：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>India</title> 
     <script src="https://d3js.org/d3.v4.min.js"></script> 
    </head> 
    <body> 

     <script type="text/javascript"> 

      //Width and height 
      var w = 500; 
      var h = 500; 

      var projection = d3.geoMercator() 
          .translate([w/2, h/2]) 
          .scale(500); 

      //Define default path generator 
      var path = d3.geoPath() 
         .projection(projection); 


      //Create SVG element 
      var svg = d3.select("body") 
         .append("svg") 
         .attr("width", w) 
         .attr("height", h); 

      var rectangle = svg.append("rect") 
         .attr("height", h).attr("width", w) 
         .attr("fill", "transparent") 
         .attr("stroke", "black") 
         .attr("stroke-width", 1); 

      //Load in GeoJSON data 
      d3.json("india.json", function(json) { 

       //Bind data and create one path per GeoJSON feature 
       svg.selectAll("path") 
        .data(json.features) 
        .enter() 
        .append("path") 
        .attr("d", path) 

     }); 

     </script> 
    </body> 
</html>

來源

2017-03-03 Hyperbola

當我用你的代碼，只改變印度的GeoJSON的世界的GeoJSON的，我得到這個：

的地圖聚焦在在Afrcia的東海岸附近。這是d3中大部分投影的默認焦點。這也是爲什麼您在視口中看不到任何內容並且沒有看到任何錯誤。

如果你設置你的心，說（把我的頭頂部）[80,25]你會更被多集中在印度：

 var projection = d3.geoMercator() 
         .center([80,25]) 
         .translate([w/2, h/2]) 
         .scale(800);

有不同的方式，以中心麥卡托地圖，其中包括使用投影的旋轉。同樣，不同的地圖投影可以使用不同的參數或方法居中。

與此例中（.center([80,25])）和（.scale(800)）縮小了一點點使用你的代碼讓我：

一個更精確的方法是找到印度的心（在線肯定）作爲中心點而不是我的錯誤。

每當你看不到你期望的東西時，檢查DOM看它是否被繪製（但只是在屏幕外）或縮小以查看你是否看錯了地方。

爲什麼地圖項目沒有投影？由於lat長對被解釋爲svg上的像素位置，這就是爲什麼當您沒有爲geoPath定義投影時地圖很小的原因。

來源

2017-03-03 20:54:26

非常感謝您的詳細解答，非常感謝。 – Hyperbola

很高興我可以幫助 –

*「我的頭頂」*和繁榮，就在目標！ Mate，你是製圖員嗎？ :-) –

使用D3.js投影顯示地圖

回答

相關問題