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