D3.js 中的缩放 API

缩放 API 支持内容缩放。 我们可以借助点击并拖动方法专注于特定区域。

让我们详细讨论一下。

配置 API

可以使用以下脚本从 "d3js.org" 加载缩放 API。

缩放 API 的方法

缩放 API 的方法如下所示

1. zoom()

它创建一个缩放行为。 可以使用以下脚本来访问它。

2. zoom(selection)

它可用于某些选定项目的缩放变换应用。

例如，我们可以借助以下脚本实例化 mousedown.zoom 的行为

3. transform(selection, transform)

它用于将选定项目的最新缩放变换固定到描述的变换。

例如，可以使用以下脚本将任何缩放变换重置为恒等变换。

此外，我们可以使用以下提到的语法将任何缩放变换重置为恒等变换 1000 毫秒

4. translateBy(selection, x, y)

它用于通过值 x 和 y 转换所选项目的最新缩放变换。 我们可以将平移值 (x 和 y) 描述为函数或将返回数字的数字。 如果任何函数已调用到选定项目，它将通过 DOM 的索引 'i' 和最新数据 'd' 传递。 示例代码可以如下所示

5. translateTo(selection, x, y)

它用于将某些选定项目的最新缩放变换转换为描述的 x 和 y 位置。

6. scaleTo(selection, k)

它用于将某些选定项目的最新缩放变换缩放到 k。 其中 k 可以定义为任何比例因子，描述为函数或数字。

7. scaleBy(selection, k)

它用于将某些选定项目的最新缩放变换缩放到 k。 其中 k 可以定义为任何比例因子，描述为函数或将返回数字的数字。

8. filter([filter])

它可用于为缩放行为的任何描述函数修复过滤器。 如果未描述任何过滤器，它将返回最新的过滤器。

它描述如下

9. wheelDelta([delta])

函数，即 wheel delta，用于返回 Δ 值。 如果未描述 delta，则它将返回最新的函数 wheel delta。

10. extent([extent])

它用于将范围固定到任何描述的数组点。 如果未描述范围，它将返回最新的范围访问器，默认为范围 [0, 0]，[height, width]，其中客户端高度是高度，项目的客户端宽度是宽度。

11. scaleExtent([extent])

它用于将任何比例范围固定到描述的数字数组 [k0, k1]。 其中，

k0： 允许的最小比例因子

k1： 允许的最大比例因子。

如果未描述任何范围，它将返回最新的比例范围，默认为范围 [0, ∞]。 可以考虑以下示例代码，该代码定义如下

12. translateExtent([extent])

如果描述了范围，它将为任何描述的点的数组修复平移范围。 当未描述范围时，它将返回最新的平移范围，默认为范围 [[-∞, -∞], [+∞, +∞]]。

13. clickDistance([distance])

它用于修复最大距离，即任何可缩放区域都可以在下和上之间传输，这可能会触发一个名为后续点击的事件。

14. duration([duration])

上述方法可用于修复缩放过渡的持续时间。 它可以进行双击和双击，以描述的毫秒数为单位，这将返回缩放性质。 如果未指定持续时间，它还将返回最新的持续时间，即 250 毫秒（默认）。

它描述如下

15. interpolate([interpolate])

它用于内插到描述函数的缩放过渡。 如果未定义插值，它将返回最新的插值工厂，默认为 d3.interpolateZoom。

16. on(typenames[, listener])

如果未定义侦听器，它将为描述的类型名称设置事件侦听器。 它还将返回缩放性质。 类型名称是具有多个类型名称的字符串，这些类型名称由空格分隔。 所有类型名称都是类型，后跟名称和句点 (.)，例如 zoom.second 和 zoom.one。 该名称允许注册到类似类型的多个侦听器。 该类型应属于以下内容

• 开始： 开始字段用于在缩放开始后（如在 mousedown 上）。
• 缩放： 缩放字段用于在缩放变换发生任何变化后（例如在 mousemove 上）。
• 结束： 结束字段用于在缩放结束之后（如在 mouseup 上）。