svg - 在 d3 上更新缩放时避免取消缩放/缩放过渡

Question

我想以编程方式翻译可缩放条形图。
我们可以像 example 上介绍的那样实现这一目标, 缩放时会产生以下效果:

但是，我想避免在过渡转换图表时取消缩放/缩放。

换句话说，我想在整个过渡期间保持当前的缩放比例。

我如何使用 d3 实现此目的？

Answer 1

D3 的缩放插值/补间在缩放状态之间转换时使用特殊的插值器。此行为 can be不需要的，尤其是因为它可能出乎意料。

在您的情况下，您可以通过使用 zoom.interpolate() 指定缩放插值器来简单地覆盖默认缩放插值器:

If interpolate is specified, sets the interpolation factory for zoomtransitions to the specified function. If interpolate is notspecified, returns the current interpolation factory, which defaultsto d3.interpolateZoom to implement smooth zooming. To apply directinterpolation between two views, try d3.interpolate instead. (docs)

因此，我们可以用 d3.interpolate 替换默认的插值器。因此，这将是您的缩放行为:

d3.zoom()
  .interpolate(d3.interpolate)
  ...

它将在起始变换和最终变换中包含的相应值之间进行插值，因为比例值在平移过程中不会发生变化，因此在整个插值过程中比例值不会发生变化。