mercatorのマップ上でd3.jsのドラッグ動作を制限する方法

Question

mercator-functionがd3.jsのsvg-Elementでマップを実装しました。 マップは特定の都市のみを表しています。シティマップ以外のものはすべて自分のプロジェクトとは関係ありません。

ここでは、このマップにzoom（）やdrag（）などの機能を実装したいと考えています。

しかし、私はmercator-mapでdrag（） - 関数を処理するための解決策を見つけることができません。私は変換の領域を制限することはできません。 （ユーザーが都市のマップ外に地図をドラッグすることはできません）

通常のSVG要素については、この作品：

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

しかし、それは私のメルカトルマップでは動作しません。 ！ここ

私を助けてください:(事前に

感謝を

は小さな一例です： https://jsfiddle.net/c55w7u9e/

私の意図は、ユーザーが赤をドラッグするための可能性があってはならないということであり、 （この例では、私のプロジェクトの地図では）svg要素の外側にあります...

Answer 1

更新日：https://jsfiddle.net/thatoneguy/c55w7u9e/4/

あなたはあなたの半径を考慮に入れませんでした。それは働いていましたが、あなたはそれを見ることはできません。 Explaining Mike Bostock's d3.js dragmove function

そして、この例：この質問から

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

ヘルプ：これまでドラッグ更新...

をhttp://bl.ocks.org/mbostock/1557377は//そのオフライン思いを私はそれがうまく動作し、制限するために、この機能を使用します：例から

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

更新フィドル：https://jsfiddle.net/thatoneguy/c55w7u9e/5/