Question

我正在跟随Bostock的map tutorial和我自己的data。我知道投影是一个采用3D纬度/经度坐标并返回2D x / y坐标的函数。我也明白d3.geo.path处理了使用GeoJSON并将其转换为SVG的混乱业务。我得到了如何将投影函数作为参数传递给d3.geo.path，告诉它如何将GeoJSON描述的3D lat / long投影到2D SVG中。到目前为止一切都很好。

然而，我在投影时在地图上“放大”会遇到很多麻烦。使用投影的中心属性，地图以适当的纬度和经度为中心。我使用投影的translate属性将点放在SVG元素的中心。但是，无论我使用多少数量的比例，地图都不会变大或变小。我检查了骨头错误：我正在正确保存更改，并且它们正在得到正确的服务。错误与我如何使用scale有关。

如何放大？

window.onload = function() {

    //Width and height
    var width = 960,
        height = 1160;

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

     //setting scale to numbers as high as 30000 and as low as 3 does not change my map
    var projection = d3.geo.transverseMercator().translate([width / 2, height / 2]).scale(3).center(-90.088, 29.957);

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

    d3.json("orleans.json", function(json) {
        svg.selectAll("path")
            .data(json.features)
            .enter()
            .append("path")
            .attr("d", path);
    });

};

Answer 1

d3.geo.path()没有任何参数。要设置路径的投影，请使用以下代码：

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

Answer 2

要考虑的另一个选择是在svg标记中使用“preserveAspectRatio”和“viewBox”属性（如果你的地图使用了一个）：

svg preserveAspectRatio =“xMidYMid meet”viewBox =“0 0 500 200”id =“mapsvg”

通过提高或降低视窗编号，您可以缩小或放大地图。

无法缩放我的d3地图

2 个答案: