Also habe ich eine Weltkarte mit Mauszoom erhalten, die die Standardeinstellung d3.behavior.zoom () und Limits verwendet, um zu verhindern, dass die Karte vollständig aus der Seite gezogen wird. Es war eine Qual, sich an die Arbeit zu machen, aber jetzt klappt es.

Mein Problem ist nun, dass dieses Projekt auch unnötige Zoom + und - Schaltflächen in der Benutzeroberfläche erfordert und ich kein Beispiel mit beiden Zoomtypen finden kann. Entweder nur mit der Maus oder nur mit der Taste.

Ich habe versucht, einfach zoom.scale (newScale) aufzurufen. aber es wird nichts aktualisiert. Ich scheine auf dem richtigen Weg zu sein, da Sie in der Konsole sehen können, dass die Skala aktualisiert wird, aber nicht aktualisiert wird, und wenn ich mit der Maus zoome, springe ich plötzlich zu der Skala, die mit der Schaltfläche definiert wurde. Aber es scheint, dass ich auch die Übersetzung aktualisieren muss und ich bin mir nicht sicher, wie ich in die Mitte der Karte gelangen und die Übersetzung berechnen soll, die zum Zoomen benötigt wird.

Ich muss auch wissen, wie die Projektion nach dem Aufrufen von zoom.scale (newScale) aktualisiert wird. wenn es der Weg ist, das zu tun.

Ich habe eine vereinfachte Demo mit Zoom-Button gemacht, die momentan offensichtlich nicht funktioniert.http://bl.ocks.org/jfmmm/f5c62bc056e557b80447

Vielen Dank!

Bearbeiten: So nah dran, es zoomt in die Mitte der Karte, weil ich die gleiche Berechnung verwende, die ich zur Berechnung der Bildschirmmitte verwendet habe, aber mit dem neuen Maßstab. Das Problem ist, dass ich das Objekt in der Mitte des Bildschirms vergrößern möchte, nicht immer das Land in der Mitte der Karte.

function zoomBtn(action) {
    var currentZoom = zoom.scale();

    if( action == 'in' ){
        if(currentZoom < options.maxZoomLevel){
            var newScale = Math.floor(currentZoom) + 1;

            var b = path.bounds(mapFeatures);
            var t = [(width - newScale * (b[1][0] + b[0][0])) / 2, (height - newScale * (b[1][1] + b[0][1])) / 2];

            zoom.scale(newScale)
                .translate(t)
                .event(svg);
        }
    }else{
        if(currentZoom > options.minZoomLevel){
            var newScale = Math.floor(currentZoom) - 1;

            var b = path.bounds(mapFeatures);
            var t = [(width - newScale * (b[1][0] + b[0][0])) / 2, (height - newScale * (b[1][1] + b[0][1])) / 2];

            zoom.scale(newScale)
                .translate(t)
                .event(svg);
        }
    }
}

Ich werde mein Beispiel in einer Minute aktualisieren.