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

盖兰神

我想以编程方式转换可缩放的条形图。
我们可以实现如本示例所示的效果,从而在缩放时产生以下效果:

在此处输入图片说明

但是,在过渡转换图表时,我想避免缩放。

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

如何使用d3做到这一点?

安德鲁·里德(Andrew Reid)

在缩放状态之间转换时,D3的缩放插值/补间使用特殊的插值器。此行为可能是不希望的,尤其是可能无法预期的情况。

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

如果指定了插值,则将缩放过渡的插值工厂设置为指定功能。如果未指定interpolate,则返回当前的插值工厂,默认为d3.interpolateZoom以实现平滑缩放。要在两个视图之间应用直接插值,请尝试使用d3.interpolate。docs

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

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

它将在开始和最终转换中包含的相应值之间进行插值,因为缩放值在平移中不会改变,所以缩放值在整个插值过程中都不会改变。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章