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

Question

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

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

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

如何使用 d3 实现这一点？

Answer 1

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

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

如果指定了 interpolate，则设置缩放的插值工厂 转换到指定的函数。如果插值不是 指定，返回当前插值工厂，默认 到 d3.interpolateZoom 来实现平滑缩放。直接申请 两个视图之间的插值，请尝试 d3.interpolate 代替。 (docs)

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

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

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