如何在页面刷新时重置Deneb/Vega倒计时器至30秒

我参考Daniel Patrick Marsh的示例实现了Deneb动态倒计时器，页面中的表格通过Direct Query每30秒自动刷新。我期望页面刷新时，Deneb的倒计时器能重置为30秒，但当前计数器会持续进入负数（如-1、-2、-3等）。作为Deneb/Vega新手，我不知道如何将counter信号重置为30。

{
  "data": [{ "name": "dataset" }],
  "signals": [
    {
      "name": "interval",
      "init": "10000"
    },
    {
      "name": "startTime",
      "init": "now()"
    },
    {
      "name": "counter",
      "init": "interval",
      "on": [
        {
          "events": {
            "type": "timer",
            "throttle": 10
          },
          "update": "round((interval - (now() - startTime))/1000)"
        }
      ]
    },
    {
      "name": "seconds",
      "update": "counter + ' second' + (counter == 1 ? '' : 's') + ' until next selection'"
    }
  ],
  "marks": [
    {
      "type": "text",
      "encode": {
        "enter": {
          "x": { "value": 0 },
          "y": { "signal": "height/2" },
          "baseline": {
            "value": "middle"
          }
        },
        "update": {
          "text": {
            "signal": "seconds"
          }
        }
      }
    }
  ],
  "config": {
    "text": {
      "font": "Segoe UI",
      "fontSize": 16,
      "fill": "#605E5C"
    }
  }
}

问题核心是页面刷新时Vega信号不会自动重置，需要监听数据更新事件触发重置逻辑，同时修正倒计时逻辑避免负数。修改点如下：

• 将倒计时时长interval改为30000（对应30秒）
• 给counter添加数据更新监听事件，页面数据刷新时重置起始时间和计数器
• 在倒计时计算中加入max(0, ...)，防止计数器变为负数

修改后的完整代码：

{
  "data": [{ "name": "dataset" }],
  "signals": [
    {
      "name": "interval",
      "init": "30000"
    },
    {
      "name": "startTime",
      "init": "now()"
    },
    {
      "name": "counter",
      "init": "30",
      "on": [
        {
          "events": {
            "type": "timer",
            "throttle": 10
          },
          "update": "max(0, round((interval - (now() - startTime))/1000))"
        },
        {
          "events": {
            "signal": "dataset"
          },
          "update": "startTime = now(); 30"
        }
      ]
    },
    {
      "name": "seconds",
      "update": "counter + ' 秒' + (counter == 1 ? '' : 's') + ' 后刷新'"
    }
  ],
  "marks": [
    {
      "type": "text",
      "encode": {
        "enter": {
          "x": { "value": 0 },
          "y": { "signal": "height/2" },
          "baseline": {
            "value": "middle"
          }
        },
        "update": {
          "text": {
            "signal": "seconds"
          }
        }
      }
    }
  ],
  "config": {
    "text": {
      "font": "Segoe UI",
      "fontSize": 16,
      "fill": "#605E5C"
    }
  }
}

• events: { signal: "dataset" }：监听Deneb数据集变化，这是页面刷新时触发的事件，用于重置倒计时
• startTime = now(); 30：数据刷新时先重置起始时间为当前时间，再将计数器设为30
• max(0, ...)：确保倒计时不会出现负数，到0后停止递减

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