d3.js - dc.js geochoropleth map 缩放

标签 d3.js svg scaling dc.js choropleth

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

如何让我的 map 按比例放大以填充我的 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();
  });

最佳答案

问题在于您确定projection.scale() 的逻辑。我不确定如何修改您的逻辑来为您的 map 提供自定义比例,但这里是我之前在 map 中使用过的比例逻辑示例。我乘以宽度和高度的因子基于 albersUsa 投影的整体纵横比,因此您需要调整它们以使其适合墨卡托投影。

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

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

关于d3.js - dc.js geochoropleth map 缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34318121/

相关文章:

javascript - 具有透明度、多边形、读取图像像素的简单图形 API?

node.js - Sails.js (Node.js) 服务器架构、扩展和性能

cordova - iPad Pro Cordova 应用缩放

html - 如何将 td 的宽度设置为 float

javascript - 我如何从图表中获取带有 ID 的 SVG?

javascript - 饼图点击问题 - 未检测到点击

javascript - 如何将 svg 圆定位在一条直线上并形成曲线?

javascript - 检测不同屏幕尺寸上图像中鼠标单击的位置 - JS/Jquery

javascript - D3 气泡图/包装布局 - 如何让气泡从最大的气泡向最小的气泡辐射?

javascript - 无法看到java项目(jsp)中json文件的变化