dc.js 地理分布图缩放比例

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]);

dc.js 地理分布图缩放比例

dc.js geochoropleth map scaling

scaling

svg

d3.js

dc.js

choropleth