Wie man das d3.js Ziehverhalten auf einer Mercator Map einschränkt

Question

Ich habe eine Map in einem SVG-Element mit der Mercator-Funktion von d3.js implementiert. Die Karte repräsentiert nur eine bestimmte Stadt - alles außerhalb der Stadtkarte ist für mein Projekt nicht relevant.

Jetzt möchte ich eine Funktion wie Zoom() und ziehen() auf dieser Karte implementieren.

Aber ich kann keine Lösung finden, um die drag() - Funktion mit meiner Mercator-Map zu bearbeiten - ich kann den Bereich der Transformation nicht begrenzen.

Für normale svg-Elemente das funktioniert (soll der Benutzer außerhalb der Karte der Stadt nicht in der Lage sein, um die Karte zu ziehen):

var drag = d3.behavior.drag() 
       .on("drag", dragmove); 

function dragmove(d) { 
    var x = Math.max(0, Math.min('width-of-svg-element', d3.event.x)); 
    var y = Math.max(0, Math.min('height-of-svg-element', d3.event.y)); 
    d3.select(this) 
    .attr("transform", "translate(" + x + "," + y + ")"); 
    } 

Aber es für meine mercator-Karte funktioniert nicht.

mir bitte helfen :(

Vielen Dank im Voraus

Hier ist ein kleines Beispiel: https://jsfiddle.net/c55w7u9e/

Meine Absicht ist es, dass es keine Möglichkeit, dass der Benutzer der roten zu ziehen Kreis (in diesem Beispiel, aber in meinem Projekt die Karte) außerhalb der Svg-Element ...

Answer 1

Aktualisierte Geige: https://jsfiddle.net/thatoneguy/c55w7u9e/4/

Sie haben Ihren Radius nicht berücksichtigt. Es hat funktioniert, aber du kannst es nicht sehen. Update ziehen, um diese:

function dragmove(d) { 
    var x = Math.max(0, Math.min(width - radius, d3.event.x)); 
    var y = Math.max(0, Math.min(height - radius, d3.event.y)); 
    d3.select(this) 
    .attr("transform", "translate(" + x + "," + y + ")"); 
    } 

Hilfe von dieser Frage: Explaining Mike Bostock's d3.js dragmove function

Und dieses Beispiel: http://bl.ocks.org/mbostock/1557377 // seine offline denken ...

ich diese Funktion nutzen würde zu begrenzen, funktioniert es besser :

function dragmove(d) { 
    d3.select(this) 
     .attr("cx", d.x = Math.max(radius, Math.min(width - radius, d3.event.x))) 
     .attr("cy", d.y = Math.max(radius, Math.min(height - radius, d3.event.y))); 
     } 

Aktualisiert Geige aus den Beispielen: https://jsfiddle.net/thatoneguy/c55w7u9e/5/