d3.jsで問題をドラッグ

Question

こんにちは誰かが私を助けることができれば嬉しいです。私は正常に動作しているd3.jsとズームパンをしました：

function zoom() { 

    var e = d3.event 
    var scale = d3.event.scale; 

    canvas.save(); 
    canvas.clearRect(0, 0, width, height); 
    canvas.beginPath(); 
    canvas.translate(e.translate[0], e.translate[1]); 
    canvas.scale(scale, scale); 
    draw(); 
    canvas.restore(); 

} 

は、私が唯一のキャンバス領域内の画像を持っていると思ったし、私はこのようにそれをやった：ここ

function zoom() { 
    var scale = d3.event.scale; 
    var e = d3.event, 
     tx = Math.min(0, Math.max(e.translate[0], width - imgBG.width * e.scale)), 
     ty = Math.min(0, Math.max(e.translate[1], height - imgBG.height * e.scale)) 

    canvas.save(); 
    canvas.clearRect(0, 0, width, height); 
    canvas.beginPath(); 
    canvas.translate(tx, ty); 
    canvas.scale(scale, scale); 
    draw(); 
    canvas.restore(); 
} 

はAです作業コード：https://jsfiddle.net/ux7gbedj/

問題は、例えば、フィドルがロードされ、左から右にドラッグを開始すると、2回、イメージがうまく動いていないが、次に試してみると右から左へドラッグする私は少なくとも3回ドラッグしてagを動かす必要があります私は非常に正しいことをやっていないと思います。

Answer 1

制限された変換座標（tx、ty）をズーム動作オブジェクトに戻す必要があります。そうしないと、d3.eventの変換座​​標は無制限になり、最終的に角/辺の1つに画像スティックが表示されます。つまり、画像のドラッグを-200 < x <の最小値/最大値で0のウィンドウに制限しようとしていますが、translate.x座標は連続してドラッグした後に-600になる可能性があります。 50ピクセルを-550に戻しても、コード内で最大-200になるため、イメージは移動しません。 http://bl.ocks.org/mbostock/4987520

... 
// declare the zoom behaviour separately so you can reference it later 
var zoomObj = d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom); 
var canvas = d3.select("canvas") 
    .attr("width", width) 
    .attr("height", height) 
    .call(zoomObj) 
    .node().getContext("2d"); 

function zoom() { 
    var scale = d3.event.scale; 
    var e = d3.event, 
      tx = Math.min (0, Math.max(e.translate[0], width - imgBG.width * e.scale)), 
      ty = Math.min(0, Math.max(e.translate[1], height - imgBG.height * e.scale)); 

    zoomObj.translate([tx,ty]); // THIS 
    canvas.save(); 
    canvas.clearRect(0, 0, width, height); 
    canvas.beginPath(); 
    canvas.translate(tx, ty); 
    canvas.scale(scale, scale); 
    draw(); 
    canvas.restore(); 
} 
... 

https://jsfiddle.net/ux7gbedj/1/

から採取

ロジック