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>
缩放（选择）
它用于对选定元素应用缩放变换。例如，您可以使用以下语法实例化 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，则返回当前车轮 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 是一个字符串，包含一个或多个由空格分隔的类型名。每个 typename 都是一个类型，可选后跟一个句点 (.) 和一个名称，例如 zoom.one 和 zoom.second。该名称允许为同一类型注册多个侦听器。此类型必须来自以下之一-
Start-缩放开始后（例如鼠标按下时）。
Zoom-更改缩放变换后（例如在 mousemove 上）。
End-缩放结束后（例如在 mouseup 上）。
在下一章中，我们将讨论 D3.js 中的不同请求 API。
