D3 JS地圖溢出SVG畫布 - 地圖的一部分被完全隱藏

Question

是個極其惱火使這個簡單的（非常非常簡單的地圖），以得到它的工作

這裏是JSON

https://raw.githubusercontent.com/datasets/geo-boundaries-world-110m/master/countries.geojson 

這是代碼

  var w = 800; 
      var h = 800; 


      var svg = d3.select("#map") 
         .append("svg") 
         .attr("width", w) 
         .attr("height", h); 

      //Load in GeoJSON data 



      d3.json('https://raw.githubusercontent.com/datasets/geo-boundaries-world-110m/master/countries.geojson', function(error,geoJSON){ 
        svg.selectAll("path") 
        .data(geoJSON.features) 
        .enter() 
        .append("path") 
        .attr("d", path) 
        .style("fill", "steelblue"); 
       }); 

所有看到的是，一個巨大的非洲地圖和地圖的其餘部分被SVG寬度吃掉。如何調整地圖以適應SVG size.d3

Answer 1

你缺少投影：

我假設你需要geoEquirectangular投影因此您的代碼將變爲：

var projection = d3.geoEquirectangular() 
    .scale(h/(2*Math.PI))//scale it down to h/(2*Math.PI) 
    .translate([w/2, h/4]);//translate as per your choice 

var path = d3.geoPath() 
    .projection(projection); 

其他投影是here

工作代碼here