Wie kann ich SVG-translate center ein d3.js Projektion auf die gegebenen Werte für Breitengrad und Längengrad?

Ich bin mit d3 zu Rendern einer Mercator-Projektion einer GeoJSON Weltkarte.

Ich würde gerne in der Lage sein zu verwenden, d3 zu skalieren, und übersetzen Sie die Karte auf die bekannten Längen-und Breitengrad-Werte, wie der Benutzer die Schritte, die durch meine Anwendung.

projection.center (https://github.com/mbostock/d3/wiki/Geo-Projections#wiki-center) tut, was ich möchte, kombiniert mit transition().duration(), aber dies erfordert, dass das Neuzeichnen der Karte und damit scheint teuer zu wiederholen. Ich würde gerne die native translate() und scale() Methoden, die mit SVG (https://developer.mozilla.org/en-US/docs/SVG/Attribute/transform).

Ich habe gefunden ein paar hilfreiche Beispiele, wie Mike Bostock (http://bl.ocks.org/mbostock/4699541), und nützliche Fragen, wie den folgenden über das zentrieren einer Karte zu einem bestimmten GeoJSON-Objekt (Center eine Karte in der d3 gegeben, ein geoJSON-Objekt), aber ich bin kämpfen, um Sie zu wickeln meinem Kopf herum.

Bitte könnte mir jemand helfen-center meine Projektion auf die gegebenen Werte für Breitengrad und Längengrad mit SVG ' s transform="translate(x, y)"?

Vielen Dank im Voraus.

---

Bearbeiten
@Lars: Zunächst einmal, ich danke Ihnen. Ich habe versucht Ihren Vorschlag, die und die Bewegung stattfindet, aber die Projektion scheinen sich zu bewegen und zu weit. Ich hab ein screenshot und meine Projektion-code, unten:

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

(Ansicht in voller Größe)

Oben tritt auf, wenn translateing London - 51.5171° N, 0.1062° W - mit dem folgenden code:

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

Ich habe auch versucht, die Umkehrung der Werte ein zweites mal.

InformationsquelleAutor Check12 | 2013-05-28