我在d3.js画一张地图我希望我的地图填满我的svg容器。它应该作为svg高度和宽度的函数拉伸或收缩。
var width = 500;
var height = 700;
var projection = d3.geo.mercator()
.scale((width + 1) / 2 / Math.PI)
.translate([width / 2, height / 2])
.precision(.1);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("border", border);
var path = d3.geo.path()
.projection(projection);
var g = svg.append("g");
d3.json("world.json", function(error, topology) {
g.selectAll("path")
.data(topojson.feature(topology, topology.objects.countries).features)
.enter()
.append("path")
.attr("d", path);
});
我认为我接近于我所定义的投影。我的翻译功能将地图集中在我想要的地方,我的缩放功能根据宽度调整地图的大小。因此,当svg宽度容器改变大小时,地图将根据需要拉伸或缩小。理想情况下,我想按x缩放并按y(宽度,高度)缩放。我在其他帖子中看到你可以为地图定义一个图层(正如我现在所做的那样)但是在图层上应用了变换。我想避免这是可能的,并在投影中完成所有工作。
svg容器是静态的,在创建后不会改变大小。
Center a map in d3 given a geoJSON object没有回答我的问题,因为它会根据功能计算比例。我需要知道如何根据svg容器计算它。