如何使地图的大小与容器完全吻合？

Question

我正在绘制美国地图，我希望地图能够适应div#statesvg

的大小

<div id="statesvg" style="width:100%; height:100%"></div>

div#statesvg的大小是动态的。

我默认只希望地图完全适合包含它的div。当我加载页面时，我希望地图调整为div的大小。

我的问题：

我需要这样的东西：

var width = document.getElementById('statesvg').offsetWidth;
var height = document.getElementById('statesvg').offsetWidth;       

// D3 Projection
var projection = d3.geo.albersUsa()
                   .translate([width/2, height/2])    // translate to center of screen
                   .scale([1000]);          // scale things down so see entire US

// Define path generator
var path = d3.geo.path()               // path generator that will convert GeoJSON to SVG paths
             .projection(projection);  // tell path generator to use albersUsa projection


svg.selectAll("path")
    .data(json.features)
    .enter()
    .append("path")
    .attr("d", path)
    .style("stroke", "#fff")
    .style("stroke-width", "1")
    .style("fill", function(d) {
    // Get data value
    var value = d.properties.visited;
    if (value) {
    //If value exists…
    return color(value);
    } else {
    //If value is undefined…
    return "rgb(213,222,217)";
    }
});

这是我的代码：

http://plnkr.co/edit/pm1qYdKCYDPJNm2lsZZV?p=preview

Answer 1

查看更新的plunker。投影比例被修改为.scale((height * 1.25))，svg现在被附加到statesvg div而不是身体。