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