成长条的流畅动画

Question

修改条形图视觉效果中 y 轴的最小值和最大值后，条形增长的动画中断，现在看起来很奇怪。我尝试调整信号的参数，但未能达到所需的平滑度。我只是希望动画流畅，没有突然的变化。

以下是示例文件的链接： https://github.com/tomecsek21/pbix_file

上面的视觉效果代表了我想要在下面的视觉效果中达到的期望状态。有人有什么想法吗？

Answer 1

试试这个。

如果您想获得更高级的功能，Madison 在此描述了缓动函数：

https://github.com/Giammaria/Vega-Visuals?tab=readme-ov-file#easing-functions-visualized

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "height": 300,
  "width": 700,
  "data": [
    {
      "name": "table",
      "values": [
        {"day": "1", "value": 41200},
        {"day": "2", "value": 39200},
        {"day": "3", "value": 40800},
        {"day": "4", "value": 39500},
        {"day": "5", "value": 38700}
      ],
      "transform": [
        {
          "type": "joinaggregate",
          "fields": ["value", "value"],
          "ops": ["max", "min"],
          "as": ["max_value", "min_value"]
        },
        {"type": "formula", "expr": "datum.max_value*1.05", "as": "maximum"},
        {"type": "formula", "expr": "datum.min_value*0.95", "as": "minimum"}
      ]
    }
  ],
  "signals": [
    {"name": "a", "update": "data('table')[1]['minimum']"},
    {
      "name": "increment",
      "update": "a",
      "on": [{"events": "timer{25}", "update": "increment + 250"}]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "table", "field": "day"},
      "range": "width"
    },
    {
      "name": "yscale",
      "type": "linear",
      "domain": {"data": "table", "fields": ["minimum", "maximum"]},
      "range": "height",
      "zero": false
    }
  ],
  "axes": [
    {
      "orient": "left",
      "scale": "yscale",
      "tickCount": 5,
      "grid": true,
      "gridDash": [1, 3]
    },
    {"orient": "bottom", "scale": "xscale"}
  ],
  "marks": [
    {
      "type": "rect",
      "name": "potential",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "day", "band": 0.35, "offset": -2},
          "width": {"value": 40},
          "fill": {"value": "#363636"}
        },
        "update": {
          "y": {"scale": "yscale", "field": "minimum"},
          "y2": {
            "signal": "increment<=datum.value? scale('yscale',increment): scale('yscale',datum.value)"
          }
        }
      }
    }
  ]
}