我可以使用zoom.translateBy设置初始平移吗？ [英] Can I use zoom.translateBy to set an initial pan?

问题描述

我有类似

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

我似乎无法直接调用translateBy的缩放行为，是否有其他方法来应用translateBy？ p>

I can't seem to call translateBy directly on the zoom behavior as is, is there some other way to apply translateBy?

推荐答案

假设您使用的是d3 v4

以下是此相关示例中缩放行为的初始化方式

Here's how the zoom behavior is initialized in this relevant example

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

canvas
  .call(zoom.transform, transform)

为了解析一个位，最后一行也可以这样写：

To demystify a bit, the last line could be also written like this:

zoom.transform(canvas, transform)

transform 是由您提供的函数。因为这个函数被调用，它的返回值被使用，你也可以这样重写：

transform is a function, supplied by you. Since this function is called and its returned value is used, you could also rewrite it like this:

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

这是应用转换的最低级别方式。

That's the lowest level way to apply a transform.

为方便起见，而不是 zoom.transform 你可以更简单地使用 zoom.translateBy （如上所述内部调用 zoom.transform ）

For convenience, instead of zoom.transform, you can more simply use zoom.translateBy, (which internally calls zoom.transform like above)

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

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

或者，最后一行可以重写：

Or alternatively, the last line could be rewritten:

zoom.translateBy(zoomable, initialX, initialY)

zoomable ，因为 zoom 不保持自己的翻译和缩放状态。该状态存储在要变换的元素上，即 zoomable 。

In both cases, zoomable is involved, because zoom doesn't maintain its own state of translation and scale. That state is stored on the element being transformed, i.e. zoomable.

这篇关于我可以使用zoom.translateBy设置初始平移吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！