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

配置API

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

缩放API方法

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

• d3.zoom（）
• 缩放（选择）
• zoom.transform（选择，变换）
• zoom.translateBy（selection，x，y）
• zoom.translateTo（selection，x，y）
• zoom.scaleTo（selection，k）
• zoom.scaleBy（selection，k）
• zoom.filter（[filter]）
• zoom.wheelDelta（δ）
• zoom.extent（[extent]）
• zoom.scaleExtent（[extent]）
• zoom.translateExtent（[extent]）
• zoom.clickDistance（[距离]）
• zoom.duration（[持续时间]）
• zoom.interpolate（[interpolate]）
• zoom.on（typenames [，listener]）

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

d3.zoom（）

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

缩放（选择）

用于将缩放变换应用于所选元素。例如，您可以使用以下语法实例化mousedown.zoom行为。

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

zoom.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缩放所选元素的当前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（[extent]）

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

zoom.scaleExtent（[extent]）

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

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

如果已经达到比例范围的相应极限，则用户可以尝试通过滚轮进行缩放。如果我们想防止在滚轮输入上滚动而不考虑缩放范围，请注册一个滚轮事件侦听器以防止浏览器默认行为。

zoom.translateExtent（[extent]）

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

zoom.clickDistance（[距离]）

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

zoom.duration（[持续时间]）

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

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

zoom.interpolate（[interpolate]）

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

zoom.on（typenames [，listener]）

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

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

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

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

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