Почему карта, отображаемая d3.js, разрезана пополам, хотя файл JSON содержит каждый (многоугольный) путь?

Question

ОБНОВЛЕНИЕ (РЕШЕНИЕ - Благодаря altocumulus): geoAlbersUSA() обрезает одну карту до ее границ. Использование geoMercator() с соответствующим scale() и transform() решило проблему.

В настоящее время я пытаюсь отобразить карту США и Мексики, используя d3. После создания необходимого мне JSON-файла (см. Ниже - приведенного в действие от mapshaper) я пытался спроецировать его на одну из своих веб-страниц.

Тем не менее, когда я использую d3.js для проецирования, это то, что я вижу:

Как вы могли заметить, Мексика разрезана пополам. Я действительно не понимаю, почему. Есть ли у вас какие-либо советы?

Текущий код JS:

//Create SVG
var svg_map_0 = d3.select('#mapSVG')
            .append('svg')
            .attr('height',svgHeight/2)
            .attr('width',svgWidth*0.6)

//Create another SVG to avoid jumpiness 
var svg_map = svg_map_0.append('g')

//Enable Zoom 
svg_map_0.call (d3.behavior.zoom()
    .translate ([0, 0])
    .scale (1.0)
    .scaleExtent([0.5, 4])
    .on("zoom", function() {
        svg_map.attr("transform","translate(" + Math.max(-400*d3.event.scale,Math.min(300/d3.event.scale,d3.event.translate[0])) + "," +  Math.max(-200*d3.event.scale,Math.min(150/d3.event.scale,d3.event.translate[1])) + ") scale(" +  d3.event.scale + ")");
    })
).on("dblclick.zoom", null);

//Create projection
var projection = d3.geoAlbersUsa()
                   .translate([svgWidth/3, svgHeight/4.5])
                   .scale([650]);

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

//Create function and call data
function map(d,ranking_value) {
d3.json('data/test.json', function(error, json) {
    if (error) throw error;

svg_map.selectAll('path')
               .data(json.features)
               .enter()
               .append('path')
               .attr('d', path)
               .attr('id', 'path_id_map')
               .style('stroke', '#000000')
               .attr('fill','#EAEAEA')
 )}}

Текущий код CSS:

#mapSVG {
width: calc(60% - 1px);
height: 50%;
overflow: hidden;
background-color:#FFF5D1;
border: 1px solid #A32020;
border-right:0;
float:left;
}

Снимок экрана Chrome Elements:

Другие скриншоты:

Спасибо за помощь,

Примечание: 1- В коде CSS высота не 100%, потому что карта не является единственным элементом на веб-странице. 2- Файл JSON был сохранен там: JSFiddle