dc.js geochoropleth map scaling

Question

У меня есть географическая карта. Все работает отлично, но карта, которая нарисована, невероятно крошечная. Я проверил GEOJSON на наличие ошибок, и он отлично работает. В JS Box есть надлежащая рабочая демонстрация, которая закомментирована, чтобы увидеть рабочий пример.

Как получить мою карту для масштабирования, чтобы заполнить мой svg?

http://codepen.io/MichaelArledge/pen/VeeVmY?editors=011

$.getJSON("https://googledrive.com/host/0B9jw0MX1C_D_N1plZFhjTlZwY3c", function(json){ 
    var max = community_per_capita_totals.top(1)[0].value; 
    // create a first guess for the projection 
    var center = d3.geo.centroid(json) 
    var scale = 100; 
    var offset = [width/2, height/2]; 
    var projection = d3.geo.mercator().scale(scale).center(center).translate(offset); 

    // create the path 
    var path = d3.geo.path().projection(projection); 

    // using the path determine the bounds of the current map and use 
    // these to determine better values for the scale and translation 
    var bounds = path.bounds(json); 
    var hscale = scale*width/(bounds[1][0] - bounds[0][0]); 
    var vscale = scale*height/(bounds[1][1] - bounds[0][1]); 
    var scale = (hscale < vscale) ? hscale : vscale; 
    var offset = [width - (bounds[0][0] + bounds[1][0])/2, height - (bounds[0][1] + bounds[1][1])/2]; 

    // new projection 
    projection = d3.geo.mercator().center(center).scale(scale).translate(offset); 
    path = path.projection(projection); 

    chart.dimension(community_dim) 
     .group(community_per_capita_totals) 
     .width(width) 
     .height(height) 
     .colors(["#E2F2FF", "#C4E4FF", "#9ED2FF", "#81C5FF", "#6BBAFF", "#51AEFF", "#36A2FF", "#1E96FF", "#0089FF", "#0061B5"]) 
     .colorDomain([0, max]) 
     .projection(d3.geo.mercator() 
     .center(center) 
     .scale(scale) 
     .translate(offset)) 
     .overlayGeoJson(json["features"], "Community") 

    dc.renderAll(); 
    }); 

Answer 1

Вопрос в том, с логикой для определения projection.scale(). Я не уверен, как изменить вашу логику, чтобы дать вам собственный масштаб для вашей карты, но вот пример масштабной логики, которую я использовал на картах раньше. Факторы, которые я умножаю на ширину и высоту, основаны на общем соотношении сторон проекции albersUsa, поэтому вам нужно будет настроить их, чтобы они соответствовали проекции меркатора.

var scale = Math.min(width * 1.2, height * 2.1); 

var projection = albersUsaPr() 
     .scale(scale) 
     .translate([width/2, height/2]);