3

我正在使用 d3 渲染 GeoJSON 世界地图的墨卡托投影。

我希望能够使用 d3 进行缩放，并在用户逐步浏览我的应用程序时将地图转换为已知的纬度和经度值。

projection.center（https://github.com/mbostock/d3/wiki/Geo-Projections#wiki-center）做我想要的，结合transition().duration()，但这需要重新绘制地图，因此重复似乎很昂贵。我想使用SVG 附带的本机translate()和方法（ https://developer.mozilla.org/en-US/docs/SVG/Attribute/transform）。scale()

我找到了一些有用的示例，例如 Mike Bostock 的 ( http://bl.ocks.org/mbostock/4699541 )，以及一些有用的问题，例如以下关于将地图居中到给定 GeoJSON 对象的问题 ( Center a map in d3给定一个 geoJSON 对象），但我很难把头绕在它们周围。

请有人可以帮助我使用 SVG 将我的投影居中到给定的纬度和经度值transform="translate(x, y)"？

提前谢谢了。

编辑 @Lars：首先，谢谢。我已经尝试了您的建议，并且发生了移动，但投影似乎移动得太远了。我在下面包含了一个屏幕截图和我的投影代码：

var SFMap = {
    initialise: function() {
        var width = "752";
        var height = "420";
        SFMap.projection = d3.geo.mercator()
            .scale(100)
            .translate([width/2, height/2])
            .center([0, 0]);

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

        SFMap.svg = d3.select("#sf__map")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

        SFMap.g = SFMap.svg.append("g");

        d3.json("world-110m.topo.json", SFMap.draw);
    },

    draw: function(error, topology) {
        SFMap.g
            .selectAll("path")
            .data(topojson.feature(topology, topology.objects.countries)
                .features)
            .enter()
            .append("path")
            .attr("d", SFMap.path)
            .attr("class", "feature");
    },

投影运动 （查看全尺寸）

上述情况发生在translate伦敦 - 北纬 51.5171°，西经 0.1062° - 使用以下代码：

var coordinates = SFMap.projection([0.1062, 51.5171]);
SFMap.g.attr("transform", "translate(" + (-coordinates[0]) + "," + (-coordinates[1]) + ")");

我也尝试过第二次反转这些值。

4

1 回答 1

2

假设您的投影的中心是 (0,0)，您需要做的就是将要居中的点的坐标提供给投影函数（转换为用户坐标）并将其倒数提供给translate. 就像是

var coordinates = projection(point);
svg.attr("transform", "translate(" + (-coordinates[0]) + "," + (-coordinates[1]) + ")");

如果您也翻译了投影，则需要考虑到这一点，例如

svg.attr("transform", "translate(" + (-coordinates[0]+width/2) +
         "," + (-coordinates[1]+height/2) + ")");
于 2013-05-28T11:01:30.427 回答