You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Vega Lite:实现无循环的柱状图平滑过渡动画

关于Vega-Lite实现触发式停止动画的疑问

我找到一篇讲解Vega-Lite动画可视化的优质文章,不过目前我想搞清楚:能不能在Vega-Lite里实现从0平滑过渡到目标数值后自动停止的动画?比如由筛选器变化这类操作触发的柱状图动画。有没有人知道这是否可行?

附上我尝试的示例代码:

{
  "width": 400,
  "height": 220,
  "signals": [
    {
      "name": "ceiling_value",
      "value": 4000
    },
    {
      "name": "increment",
      "value": 1,
      "on": [
        {
          "events": "timer{70}",
          "update": "increment + 500"
        }
      ]
    }
  ],
  "data": [
    {
      "name": "dataset",
      "transform": [
        {
          "type": "formula",
          "as": "day",
          "expr": "datum['day']"
        },
        {
          "type": "formula",
          "as": "value",
          "expr": "clamp(datum['zero_measure'] + increment, 0, ceiling_value)"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {
        "data": "dataset",
        "field": "day"
      },
      "range": "width"
    },
    {
      "name": "yscale",
      "type": "linear",
      "domain": [0, 6000],
      "range": "height"
    }
  ],
  "axes": [
    {
      "orient": "left",
      "scale": "yscale"
    },
    {
      "orient": "bottom",
      "scale": "xscale"
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "dataset"},
      "encode": {
        "enter": {
          "x": {
            "scale": "xscale",
            "field": "day"
          },
          "width": {
            "scale": "xscale",
            "band": 0.8,
            "offset": -1
          },
          "fill": {
            "value": "steelblue"
          },
          "cornerRadius": {"value": 4}
        },
        "update": {
          "y": {
            "scale": "yscale",
            "field": "value"
          },
          "y2": {
            "scale": "yscale",
            "value": 0
          }
        }
      }
    }
  ]
}

内容的提问来源于stack exchange,提问作者tomecsek

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.04 13:45:11