基于SVG、CSS、D3与Svelte的滚动动画条形图过渡问题

我正在制作一款带滚动器的动画条形图，目前已完成滚动功能与数据交互，但在过渡效果上遇到两个核心问题：

• 为每个<g>元素添加CSS transition后，动画向右移动时，元素并非从上次结束位置启动，而是从无/中心位置开始
• 已将数据中的consectetur设为始终最大值，本该一直处于图表顶端，却总是从中间或底部启动动画

另外，我尝试过Svelte的transition指令，但不清楚如何通过滚动器触发的index变化来触发过渡（官方示例使用的是布尔复选框触发）。

已完成的Demo基于Svelte 3.53.1实现。

内容的提问来源于stack exchange，提问作者louislugas