plot - Observable Plot 中的动画数据转换

Question

我正在使用 Javascript 库 Observable Plot 在网页上呈现条形图（而不是在 Observable 本身上）。我希望条形图中的条形图响应数据的变化进行转换：条形图应该在 y 方向上动画地增长/收缩（带有一些特殊的缓动），并且 y 轴应该重新缩放。如果可能的话，实现这一目标的最佳方法是什么？

我们可以假设柱的数量不会随时间变化（即 x 轴是恒定的），但也欢迎处理 x 轴变化的解决方案。

例如，我想从

条形图预转换

这说明data = [ 2, 5, 10, 6 ]了

转换后的条形图

这说明data = [ 8, 4, 3, 2 ].

这些图是使用生成的

Plot.plot({
  y: {
    grid: true
  },
  marks: [
    Plot.barY(data, {x: (d, i) => i}),
    Plot.ruleY([0])
  ]
})

Answer 1

感谢您使用 Observable Plot。我们肯定想在项目中构建动画和交互，但我们还没有完全做到。同时，这是一种临时方法：https ://observablehq.com/@fil/plot-animate-a-bar-chart

感谢您的反馈！