D3.js - 缩放 API

Created: November-04, 2018

缩放有助于扩展你的内容。你可以使用单击并拖动方法专注于特定区域。在本章中，我们将详细讨论 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 方法

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

d3.zoom()
zoom(selection)
zoom.transform(selection，transform)
zoom.translateBy(selection，x，y)
zoom.translateTo(selection，x，y)
zoom.scaleTo(selection，k)
zoom.scaleBy(selection, k)
zoom.filter([filter])
zoom.wheelDelta(delta)
zoom.extent([extend])
zoom.scaleExtent([extend])
zoom.translateExtent([extend])
zoom.clickDistance([distance])
zoom.duration([time])
zoom.interpolate([interpolate])
zoom.on(typenames[, listener])

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

`d3.zoom()`

它会创建一个新的缩放行为。我们可以使用下面的脚本访问它。

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

`zoom(selection)`

它用于对选定元素应用缩放 transform。例如，你可以使用以下语法实例化 mousedown.zoom 行为。

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

zoom.transform(selection，transform)

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

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

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

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

`zoom.translateBy(selection，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
      );
   }
};

`zoom.translateTo(selection，x，y)`

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

`zoom.scaleTo(selection，k)`

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

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

zoom.scaleBy(selection，k)

它用于通过 k 缩放所选元素的当前 zoon 变换。这里，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;
   });
};

`zoom.filter([filter])`

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

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

zoom.wheelDelta(delta)

Δ 值由轮三角函数返回。如果未指定 delta，则返回当前车轮增量功能。

zoom.extent([extend])

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

zoom.scaleExtent([extend])

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

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

当已经处于比例范围的相应极限时，用户可以尝试通过转动进行缩放。如果我们想要阻止滚轮输入而不管刻度范围，请注册滚轮事件侦听器以防止浏览器默认行为。

zoom.translateExtent([extend])

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

zoom.clickDistance([distance])

此方法用于设置可缩放区域在向上和向下之间移动的最大距离，这将触发后续单击事件。

zoom.duration([time])

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

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

zoom.interpolate（[interpolate]）

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

`zoom.on(typenames[, listener])`

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

开始 - 缩放开始后（例如在 mousedown 上）。
缩放 - 更改缩放变换后（例如在 mousemove 上）。
结束 - 缩放结束后（例如鼠标上）。

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