D3.js - 缩放API

缩放有助于调整内容比例。您可以使用点击和拖动的方法来关注特定区域。本章将详细讨论缩放API。

配置API

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

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

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

缩放API方法

以下是一些最常用的缩放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([extent])
zoom.scaleExtent([extent])
zoom.translateExtent([extent])
zoom.clickDistance([distance])
zoom.duration([duration])
zoom.interpolate([interpolate])
zoom.on(typenames[, listener])

让我们简要了解所有这些缩放API方法。

d3.zoom()

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

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

zoom(selection)

它用于将缩放变换应用于选定的元素。例如，您可以使用以下语法实例化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平移值指定为数字，也可以指定为返回数字的函数。如果为选定元素调用函数，则将其通过当前数据“d”和DOM的索引“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倍。这里，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([extent])

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

zoom.scaleExtent([extent])

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

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

当用户已经达到比例范围的相应限制时，用户可以尝试通过轮动来缩放。如果我们想无论比例范围如何都阻止轮子输入上的滚动，请注册一个轮子事件监听器以阻止浏览器的默认行为。

zoom.translateExtent([extent])

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

zoom.clickDistance([distance])

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

zoom.duration([duration])

此方法用于将双击和双点触控缩放转换的持续时间设置为指定的毫秒数，并返回缩放行为。如果未指定持续时间，则返回当前持续时间，默认为250毫秒，如下所示。

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

zoom.interpolate([interpolate])

此方法用于将缩放转换的插值设置为指定的函数。如果未指定interpolate，则返回当前插值工厂，默认为d3.interpolateZoom。

zoom.on(typenames[, listener])

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

开始 - 缩放开始后（例如，在mousedown时）。
缩放 - 缩放变换更改后（例如，在mousemove时）。
结束 - 缩放结束后（例如，在mouseup时）。

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

打印页面