zoom.translateByを使用して初期パンを設定できますか？

Question

私はtranslateByを適用する他のいくつかの方法があり、あるとしてズーム動作に直接translateByを呼び出すように見えることはできません

zoomable 
    .call(d3.zoom() 
    .scaleExtent([1, Infinity]) 
    .translateExtent([[0, 0], [width, height]]) 
    .on('zoom', handleZoom)) 

のようなものを持っていますか？

Answer 1

これはあなたがここでD3 v4の

を使用していると仮定し、ズーム動作がビットを分かりやすく説明するためにthis relevant example

var zoom = d3.zoom() 
    .on("zoom", zoomed) 

canvas 
    .call(zoom.transform, transform) 

に初期化されている方法です、最後の行にも、このように書くことができます：

zoom.transform(canvas, transform) 

transformは、あなたが提供する関数です。この関数が呼び出され、その返された値が使用されているので、あなたも、このようにそれを書き換えることができます：変換を適用する最低レベルの道をだ

zoom.transform(canvas, d3.zoomIdentity.translate(...) /* and .scale(...) etc */) 

を。

便宜上

、代わりのzoom.transform、あなたがより簡単に、代わり

var zoom = d3.zoom() 
    .scaleExtent([1, Infinity]) 
    .translateExtent([[0, 0], [width, height]]) 
    .on('zoom', handleZoom) 

zoomable.call(zoom.translateBy, initialX, initialY) 

か（内部zoom.transform上記のように呼び出します）zoom.translateByを、使用することができますが、最後の行を書き換えることができます

zoom.translateBy(zoomable, initialX, initialY) 

いずれの場合も、zoomは翻訳と縮尺の状態を保持していないため、zoomableが含まれています。その状態は変換される要素に格納されます。つまり、zoomableです。

Answer 2

これは、相対的な翻訳とズーム後の処理を適用する方法です。この例では、ズームとパンを可能にするキーボードイベントを添付するのにMousetrapを使用しています。

transform = d3.zoomTransform(zoomable.node()); 

Mousetrap.bind(['=', '+', 'pageup'], function() { 
    zoomable.call(zoom).call(zoom.scaleTo, transform.k << 1); 
}); 
Mousetrap.bind(['-', 'pagedown'], function() { 
    zoomable.call(zoom).call(zoom.scaleTo, transform.k >> 1); 
}); 

Mousetrap.bind(['down'], function() { 
    zoomable 
     .call(zoom) 
     .call(zoom.translateBy, 
      0, ///transform.k, 
      -50/transform.k 
     ); 
}); 
Mousetrap.bind(['up'], function() { 
    zoomable 
     .call(zoom) 
     .call(zoom.translateBy, 
      0, 
      +50/transform.k 
     ); 
}); 
Mousetrap.bind(['left'], function() { 
    zoomable 
     .call(zoom) 
     .call(zoom.translateBy, 
      +50/transform.k, 
      0 
     ); 
}); 
Mousetrap.bind(['right'], function() { 
    zoomable 
     .call(zoom) 
     .call(zoom.translateBy, 
      -50/transform.k, 
      0 
     ); 
});