Zooming API
缩放有助于扩展您的内容。 您可以使用单击并拖动方法专注于特定区域。 在本章中,我们将详细讨论Zooming API。
配置API (Configuring 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([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(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转换值指定为数字或返回数字的函数。 如果为所选元素调用了一个函数,那么它将通过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([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范围设置为指定的点数组。 如果未指定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])
如果指定了侦听器,它将为指定的类型名设置事件侦听器并返回缩放行为。 类型名是一个包含一个或多个由空格分隔的类型名的字符串。 每个typename都是一个类型,可选地后跟句点(。)和名称,例如zoom.one和zoom.second。 该名称允许为同一类型注册多个侦听器。 此类型必须来自以下之一 -
Start - 缩放开始后(例如在mousedown上)。
Zoom - 更改缩放变换后(例如在mousemove上)。
End - 缩放结束后(例如鼠标上)。
在下一章中,我们将讨论D3.js中的不同请求API。