d3地理地图溢出答案

【问题标题】：d3 geo map overflowd3地理地图溢出
【发布时间】：2012-08-15 00:51:02
【问题描述】：

我尝试在 div 中显示我的地图 - 但我希望将此地图限制为 div 大小 - 现在，它也忽略了 w、h 值和 vis css 设置。

设置 svg 的高度和宽度是否有意义？当我把投影的比例放大时，它总是比组织大。 svg。

var w = 200;
var h = 300;

// this will attach a svg-element with the class "map" to "mydiv"
var map = d3.select("#mydiv").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .attr("class", "map"); 

var projection = d3.geo.albers()
    .origin([10.5,51])
    .scale(2000)
    .translate([100, 150]);

var path = d3.geo.path().projection(projection);

d3.json('germany.json', function(json) {
    map.selectAll('path')
        .data(json.features)
        .enter().append('path').attr('d', path);
});

还有我的 CSS：

#vis {
    overflow: hidden;
    width: 350px;
    height: 220px;
}

【问题讨论】：

#vis 和 #mydiv 是两个不同的 DIV 元素吗？

标签： html d3.js scaling geo

【解决方案1】：

基本上有两种方法可以缩放 D3 地图：

缩放投影。
将地图放在g 元素中并在该元素上设置变换。这也具有缩放笔画宽度的烦人副作用，因此您可能需要在g 元素上设置缩放的stroke-width 样式。

在这两种情况下，您都在缩放地图，而与容器元素没有直接关系。我认为没有办法自动缩放到容器 - 我认为您需要通过 JS 获取容器的宽度（这里我使用 jQuery，但也有纯 JS 选项），然后设置比例因子相应地：

var containerWidth = $('#myDiv').width(),
    baseWidth = 1000,
    baseStrokeWidth = 1,
    scaleFactor = containerWidth/baseWidth;

// now use scaleFactor in a transform or projection scale, e.g.:
d3.select('g.mapContainer')
    .attr("transform", "scale(" + scaleFactor + ")")
    // and invert the scale to keep a constant stroke width:
    .style("stroke-width", baseStrokeWidth / scaleFactor + "px");

如果您的容器大小会改变，您还需要设置一个window.onresize 处理程序来重新计算比例并更新转换。这是使用转换后的g 属性而不是投影比例的一个原因 - 要处理窗口大小调整，您不必重新投影整个地图，只需向上或向下缩放现有路径，这是一种更快的操作。

【讨论】：