D3.js - 缩放 API

缩放有助于缩放您的内容。您可以使用单击并拖动的方法来关注特定区域。在本章中，我们将详细讨论 Zooming API。

配置API

您可以使用以下脚本直接从“d3js.org”加载 Zooming API。

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script src = "https://d3js.org/d3-drag.v1.min.js"></script>
<script src = "https://d3js.org/d3-zoom.v1.min.js"></script>

<body>
   <script>
   </script>
</body>

缩放 API 方法

以下是一些最常用的缩放 API 方法。

  • d3.zoom()
  • 缩放（选择）
  • 缩放.变换（选择，变换）
  • Zoom.translateBy(选择, x, y)
  • 缩放.translateTo（选择，x，y）
  • Zoom.scaleTo（选择，k）
  • Zoom.scaleBy(选择, k)
  • 缩放.过滤器（[过滤器]）
  • Zoom.wheelDelta(δ)
  • 缩放.范围([范围])
  • Zoom.scaleExtent([范围])
  • Zoom.translateExtent([范围])
  • 缩放.clickDistance([距离])
  • 缩放.持续时间([持续时间])
  • 缩放.插值（[插值]）
  • Zoom.on(类型名称[, 监听器])

让我们简要介绍一下所有这些 Zooming API 方法。

d3.zoom()

它创建了一种新的缩放Behave。我们可以使用下面的脚本访问它。

<script>
   var zoom = d3.zoom();
</script>

缩放（选择）

它用于对选定元素应用缩放变换。例如，您可以使用以下语法实例化 mousedown.zoom Behave。

selection.call(d3.zoom().on("mousedown.zoom", mousedowned));

缩放.变换（选择，变换）

它用于将所选元素的当前缩放变换设置为指定变换。例如，我们可以使用以下语法将缩放变换重置为恒等变换。

selection.call(zoom.transform, d3.zoomIdentity);

我们还可以使用以下语法将缩放变换重置为恒等变换 1000 毫秒。

selection.transition().duration(1000).call(zoom.transform, d3.zoomIdentity);

Zoom.translateBy(选择, x, y)

它用于按 x 和 y 值平移所选元素的当前缩放变换。您可以将 x 和 y 平移值指定为数字或返回数字的函数。如果为所选元素调用函数，则它将通过 DOM 的当前数据“d”和索引“i”传递。下面定义了示例代码。

zoom.translateBy(selection, x, y) {
   zoom.transform(selection, function() {
      return constrain(this.__zoom.translate(
         x = = = "function" ? x.apply(this, arguments) : x,
         y = = = "function" ? y.apply(this, arguments) : y
      );
   }
};

缩放.translateTo（选择，x，y）

它用于将所选元素的当前缩放变换平移到 x 和 y 的指定位置。

Zoom.scaleTo（选择，k）

它用于将所选元素的当前缩放变换缩放到k。这里，k是比例因子，指定为数字或函数。

zoom.scaleTo = function(selection, k) {
   zoom.transform(selection, function() {
      k = = = "function" ? k.apply(this, arguments) : k;
   });
};

Zoom.scaleBy(选择, k)

它用于将所选元素的当前缩放变换缩放k。这里，k是比例因子，指定为数字或返回数字的函数。

zoom.scaleBy = function(selection, k) {
   zoom.scaleTo(selection, function() {
      var k0 = this.__zoom.k,
      k1 = k = = = "function" ? k.apply(this, arguments) : k;
      return k0 * k1;
   });
};

缩放.过滤器（[过滤器]）

它用于将过滤器设置为缩放Behave的指定功能。如果未指定过滤器，它将返回当前过滤器，如下所示。

function filter() {
   return !d3.event.button;
}

Zoom.wheelDelta(δ)

Δ的值由车轮 delta 函数返回。如果未指定 delta，则返回当前车轮 delta 函数。

缩放.范围([范围])

它用于设置指定数组点的范围。如果未指定范围，则返回当前范围访问器，默认为 [[0, 0], [width, height]]，其中 width 是元素的客户端宽度，height 是其客户端高度。

Zoom.scaleExtent([范围])

它用于将比例范围设置为指定的数字数组 [k0, k1]。这里，k0是允许的最小比例因子。其中，k1是允许的最大比例因子。如果未指定范围，则返回当前比例范围，默认为 [0, ∞]。考虑下面定义的示例代码。

selection
   .call(zoom)
   .on("wheel", function() { d3.event.preventDefault(); });

当已经达到缩放范围的相应极限时，用户可以尝试通过旋转进行缩放。如果我们想要防止在滚轮输入上滚动，无论缩放范围如何，请注册滚轮事件侦听器以防止浏览器默认Behave。

Zoom.translateExtent([范围])

如果指定了范围，它将平移范围设置为指定的点数组。如果未指定范围，则返回当前平移范围，默认为 [[-无穷大，-无穷大]，[+无穷大，+无穷大]]。

缩放.clickDistance([距离])

该方法用于设置可缩放区域上下移动的最大距离，这将触发后续的点击事件。

缩放.持续时间([持续时间])

此方法用于将双击和双击时缩放过渡的持续时间设置为指定的毫秒数并返回缩放Behave。如果未指定持续时间，则返回当前持续时间，默认为 250 毫秒，定义如下。

selection
   .call(zoom)
   .on("dblclick.zoom", null);

缩放.插值（[插值]）

此方法用于对指定函数的缩放过渡进行插值。如果未指定 interpolate，则返回当前插值工厂，默认为 d3.interpolateZoom。

Zoom.on(类型名称[, 监听器])

如果指定了侦听器，它将为指定的类型名称设置事件侦听器并返回缩放Behave。类型名称是一个字符串，包含一个或多个由空格分隔的类型名称。每个类型名称都是一个类型，可以选择后跟句点 (.) 和名称，例如 Zoom.one 和 Zoom.Second。该名称允许为同一类型注册多个侦听器。该类型必须来自以下类型之一 -

  • 开始- 缩放开始后（例如按下鼠标时）。

  • 缩放- 更改缩放变换后（例如在鼠标移动时）。

  • End - 缩放结束后（例如在 mouseup 上）。

在下一章中，我们将讨论 D3.js 中的不同请求 API。