在 d3 上更新缩放时避免 unzooming/zooming 过渡

Question

我想以编程方式翻译可缩放条形图。
我们可以像 example 中介绍的那样实现这一点，在缩放时会产生以下效果：

但是，我想在转换转换图表时避免 unzooming/zooming。

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

如何使用 d3 实现此目的？

Answer 1

D3 的缩放 interpolation/tweening 在缩放状态之间转换时使用特殊的插值器。这种行为 不需要，尤其是因为它可能不是预期的。

在您的情况下，您可以通过使用 zoom.interpolate():

指定缩放插值器来简单地覆盖默认缩放插值器

If interpolate is specified, sets the interpolation factory for zoom transitions to the specified function. If interpolate is not specified, returns the current interpolation factory, which defaults to d3.interpolateZoom to implement smooth zooming. To apply direct interpolation between two views, try d3.interpolate instead. (docs)

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

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

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