如何将地图的大小完全适合容器? [英] How can I exactly fit the size of a map to the container?

问题描述

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

I am drawing a map of the United States, and I would like the map to adapt to the size of the div#statesvg

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

div#statesvg的大小是动态的.

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

I only want by default that the map fits exactly to the div that contains it. When I load the page I want the map to adjust to the size of the div.

我的问题:

我需要这样的东西:

I need something like this:

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

推荐答案

查看更新的朋克.投影比例已修改为.scale((height * 1.25))，并且svg现在被附加到statesvg div中，而不是主体中.

See updated plunker. The projection scale was modified to .scale((height * 1.25)) and the svg is now being appended in to the statesvg div and not the body.

这篇关于如何将地图的大小完全适合容器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！