Question

我有一张地理地图。一切都运行得很好，但绘制的地图非常小。我检查了GEOJSON的错误，它运行正常。在JS Box中有一个适当的工作Demo，它被注释掉以查看一个工作示例。

如何让我的地图扩展以填充我的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]);

dc.js geochoropleth地图缩放

1 个答案: