如何使用 SVG translate 将 d3.js 投影居中到给定的纬度和经度值？

Question

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

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

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

我找到了一些有用的示例，例如 Mike Bostock 的 (http://bl.ocks.org/mbostock/4699541)，以及一些有用的问题，例如以下关于将地图居中到给定 GeoJSON 对象 (Center a map in d3 given a geoJSON object) 的问题，但我正在努力包装我的绕过他们。

请有人帮助我使用 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");
    },

(View full size)

当translateing 到伦敦 - 51.5171° N，0.1062° W - 使用以下代码时，会发生上述情况：

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

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

Answer 1

假设您的投影中心是 (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) + ")");