我可以使用 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.translateBy，而不是zoom.transform，（内部调用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
        ); 
});