在 d3 上更新缩放时避免取消缩放/缩放转换

Question

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

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

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

我如何使用 d3 实现这一目标？

Answer 1

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

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

<块引用>

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

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

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

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