1

我尝试在 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;
}
4

1 回答 1

6

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

  • 缩放投影。

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

在这两种情况下，您都在缩放地图，而与容器元素没有直接关系。我认为没有办法自动缩放到容器 - 我认为您需要通过 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属性而不是投影比例的一个原因 - 要处理窗口大小调整，您不必重新投影整个地图，只需向上或向下缩放现有路径，这是一种更快的操作。

于 2012-08-19T23:27:57.073 回答