Vega非循环动态柱状图优化：替换硬编码上限值需求

目前你的柱状图是从0增长到硬编码的4000，要把每个柱子的增长上限改成对应数据里的原始value值，不用全局硬编码的ceiling_value信号，具体修改如下：

关键修改点 #

• 删掉全局的ceiling_value信号，因为每个柱子的上限是自身的原始数值，不需要全局统一值
• 先把原始数据里的value字段存为新字段（避免被后续公式覆盖）
• 在clamp函数里直接引用每个柱子的原始数值作为上限

修改后的信号部分 #

"signals": [
  {
    "name": "increment",
    "value": 1,
    "on": [
      {
        "events": "timer{70}",
        "update": "increment + 500"
      }
    ]
  }
]

修改后的data transform部分 #

"transform": [
  {
    "type": "formula",
    "as": "original_value",
    "expr": "datum['value']" // 保存原始数值
  },
  {
    "type": "formula",
    "as": "day",
    "expr": "datum['day']"
  },
  {
    "type": "formula",
    "as": "value",
    "expr": "clamp(datum['zero_measure'] + increment, 0, datum.original_value)" // 用原始数值作为上限
  }
]

完整修改后的代码 #

{
  "width": 200,
  "height": 220,
  "signals": [
    {
      "name": "increment",
      "value": 1,
      "on": [
        {
          "events": "timer{70}",
          "update": "increment + 500"
        }
      ]
    }
  ],
  "data": [
    {
      "name": "table",
      "values": [
        {"day": "1", "value": 2200,"zero_measure": 0},
        {"day": "2", "value": 3200,"zero_measure": 0},
        {"day": "3", "value": 1800,"zero_measure": 0},
        {"day": "4", "value": -1500,"zero_measure": 0},
        {"day": "5", "value": 700,"zero_measure": 0}
      ],
      "transform": [
        {
          "type": "formula",
          "as": "original_value",
          "expr": "datum['value']"
        },
        {
          "type": "formula",
          "as": "day",
          "expr": "datum['day']"
        },
        {
          "type": "formula",
          "as": "value",
          "expr": "clamp(datum['zero_measure'] + increment, 0, datum.original_value)"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {
        "data": "table",
        "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": "table"},
      "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
          }
        }
      }
    }
  ]
}

这样修改后，每个柱子会从0增长到自己对应的原始value值，比如day1到2200，day2到3200，负数的day4会停在0，符合需求。

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