Question

我尝试在div中显示我的地图 - 但我希望此地图仅限于div-size - 现在，它也会忽略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;
}

Answer 1

基本上有两种缩放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属性而不是投影比例的一个原因 - 处理窗口调整大小，您不必重新投影整个地图，只需向上或向下缩放现有路径，操作速度更快

d3地图溢出

1 个答案: