D3.js教程

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(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])

让我们简单介绍一下这些Zooming API方法.

d3.zoom()

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

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

zoom(选择)

它用于对选定元素应用缩放变换.例如，您可以使用以下语法实例化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，则返回当前的wheel 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])

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

zoom .clickDistance([distance])

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

zoom.duration([duration])

此方法用于设置双击时缩放过渡的持续时间，然后双击指定的数量毫秒并返回缩放行为.如果未指定持续时间，则返回当前持续时间，默认为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.