Skip to content

缩放插值

¥Zoom interpolation

一个基于 Jarke J. 的 “平滑高效的缩放和平移” 的插值器,用于在二维平面的两个视图之间平滑缩放。van Wijk 和 Wim A.A.Nuij。

¥An interpolator for zooming smoothly between two views of a two-dimensional plane based on “Smooth and efficient zooming and panning” by Jarke J. van Wijk and Wim A.A. Nuij.

interpolateZoom(a, b)

js
d3.interpolateZoom([30, 30, 40], [135, 85, 60])(0.5) // [72, 52, 126.04761005270991]

示例 · 源代码 · 返回两个视图 a 和 b 之间的插值器。每个视图定义为一个由三个数字组成的数组:cx、cy 和 width。前两个坐标 cx 和 cy 代表视口的中心;最后一个坐标宽度表示视口的大小。

¥Examples · Source · Returns an interpolator between the two views a and b. Each view is defined as an array of three numbers: cx, cy and width. The first two coordinates cx, cy represent the center of the viewport; the last coordinate width represents the size of the viewport.

返回的插值器公开了一个 interpolate.duration 属性,该属性以毫秒为单位编码了建议的过渡时长。此持续时间基于曲线轨迹在 xy 空间中的路径长度。如果你想要更慢或更快的过渡效果,请将其乘以任意比例因子(V,如原始论文中所述)。

¥The returned interpolator exposes a interpolate.duration property which encodes the recommended transition duration in milliseconds. This duration is based on the path length of the curved trajectory through xy space. If you want a slower or faster transition, multiply this by an arbitrary scale factor (V as described in the original paper).

interpolateZoom.rho(rho) {#interpolateZoom_rho}

js
d3.interpolateZoom.rho(0.5)([30, 30, 40], [135, 85, 60])(0.5) // [72, 52, 51.09549882328188]

源代码 · 给定一个 缩放插值器,使用指定的曲率 rho 返回一个新的缩放插值器。当 rho 接近于 0 时,插值器几乎是线性的。默认曲率为 sqrt(2)。

¥Source · Given a zoom interpolator, returns a new zoom interpolator using the specified curvature rho. When rho is close to 0, the interpolator is almost linear. The default curvature is sqrt(2).