我可以使用zoom.translateBy來設置初始平移嗎？

Question

我有類似

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

我似乎無法直接調用translateBy變焦行爲是，是否有申請translateBy一些其他的方式？

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，可以更簡單地使用zoom.translateBy，（它在內部調用zoom.transform像上面）

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

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

或者，最後一行可以改寫：

zoom.translateBy(zoomable, initialX, initialY) 

在這兩種情況下，涉及zoomable，因爲zoom未保留其自己的翻譯和縮放狀態。該狀態存儲在要變換的元素上，即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 
     ); 
});