D3地理映射拟合地图到SVG容器

时间:2015-09-07 04:08:43

标签: javascript d3.js svg

我在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容器计算它。

0 个答案:

没有答案