examples - ¿Cómo puedo usar SVG translate para centrar una proyección d3.js a valores de latitud y longitud dados?

topojson

Question

Estoy usando d3 para renderizar una proyección de Mercator de un mapa mundial de GeoJSON.

Me gustaría poder usar d3 para escalar y traducir el mapa a valores de latitud y longitud conocidos a medida que el usuario avanza por mi aplicación.

projection.center ( https://github.com/mbostock/d3/wiki/Geo-Projections#wiki-center ) hace lo que me gustaría, combinado con transition().duration() , pero esto requiere volver a dibujar el mapa y por lo tanto, parece caro seguir repitiendo. Me gustaría utilizar los métodos nativos translate() y scale() que vienen con SVG ( https://developer.mozilla.org/en-US/docs/SVG/Attribute/transform ).

He encontrado algunos ejemplos útiles, como Mike Bostock ( http://bl.ocks.org/mbostock/4699541 ), y preguntas útiles, como la siguiente sobre centrar un mapa en un objeto GeoJSON dado (Centrar un mapa en d3) dado un objeto geoJSON ), pero estoy luchando para envolver mi cabeza alrededor de ellos.

¿Podría alguien ayudarme a centrar mi proyección en valores de latitud y longitud dados utilizando la transform="translate(x, y)" de SVG transform="translate(x, y)" ?

Muchas gracias de antemano.

Edite @Lars: Antes que nada, gracias. He intentado su sugerencia y se produce movimiento, pero la proyección parece ir demasiado lejos. He incluido una captura de pantalla y mi código de proyección a continuación:

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");
    },

(Ver tamaño completo)

Lo anterior ocurre cuando se translate a Londres - 51.5171 ° N, 0.1062 ° W - usando el siguiente código:

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

También intenté invertir los valores por segunda vez.

Answer 1

Suponiendo que el centro de su proyección es (0,0), todo lo que necesita hacer es dar las coordenadas del punto que desea centrar a su función de proyección (para traducir a las coordenadas del usuario) y dar el inverso de eso para translate . Algo como

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

Si también tradujiste la proyección, debes tener esto en cuenta, por ej.

svg.attr("transform", "translate(" + (-coordinates[0]+width/2) +
         "," + (-coordinates[1]+height/2) + ")");