Timer Event循环控制：Shift+双击置位需求及代码问询

现有功能 #

• Timer事件可实现counter从1到6的迭代，运行正常；
• 普通双击事件可将counter设置为1，配合click事件可启动/暂停timer。

已解决问题 #

通过将lookup transform的default值修改为"default": {"signal": "length(data('indexAll'))"}，已实现循环终止于最大值6而非0的需求。

待实现功能与解决方案 #

需要实现按住Shift键双击时，将counter设置为最大值6的功能，只需修改signals中counter的事件处理逻辑，添加针对dblclick.shiftKey事件的处理即可。

修改后的完整代码 #

{
    "data": [
        {
            "name": "data",
            "values": [{"Month": 1},{"Month": 2},{"Month": 3},{"Month": 4},{"Month": 5},{"Month": 6}]
        },
        {
            "name": "indexAll",
            "source": "data",
            "transform": [
                {   
                    "type": "project",
                    "fields": ["Month"]
                },
                {   
                    "type": "window",
                    "ops": ["row_number"],
                    "as": ["rowid"],
                    "sort": {"field": ["Month"], "order": ["ascending"]}
                }
            ]
        },
        {
            "name": "index",
            "source": "indexAll",
            "transform": [
                { "type": "formula", "as": "index", "expr": "counter" },
                {
                    "type": "lookup",
                    "from": "indexAll",
                    "key": "rowid",
                    "fields": ["index"],
                    "values": ["Month"],
                    "as": ["Month"],
                    "default":  {"signal": "length(data('indexAll'))"}
                }
            ]
        },
        {
            "name": "dataFiltered",
            "source": "data",
            "transform": [
                {
                    "type": "filter",
                    "expr": "datum['Month'] <= pluck(data('index') , 'Month')[0]"
                }
            ]
        }
    ],
    "signals": [
        {
            "name": "run",
            "value": false,
            "on": [{ "events": "click", "update": "!run" }]
        },
        {
            "name": "counter",
            "update": "length(data('indexAll'))",
            "on": [
                {
                    "events": { "type": "timer", "throttle": 1000},
                    "update": "run && counter <= length(data('indexAll')) ? counter + 1 : counter"
                },
                { "events": { "type": "dblclick.shiftKey" }, "update": "length(data('indexAll'))"},
                { "events": { "type": "dblclick" }, "update": "1"}
            ]
        }
    ],
    "scales": [
        { 
            "name": "scaleY", 
            "type": "band",
            "domain": {"data": "dataFiltered", "field": "Month"},
            "range": "height",
            "padding": 0.1,
            "round": true
        },
        { 
            "name": "scaleX", 
            "type": "linear",
            "domain": {"data": "dataFiltered", "field": "Month"},
            "range": "width",
            "nice": true
        }
    ],
    "axes": [
        {"scale": "scaleY", "orient": "left"},
        {"scale": "scaleX", "orient": "bottom"}
    ],
    "marks": [
        {   
            "description": "the counter",
            "type": "text",
            "from": { "data": "index" },
            "encode": {
                "update": {
                    "text": {
                        "signal": "'Month: ' + datum['Month']"
                    },
                    "align": { "value": "left" },
                    "fill": { "value": "darkgray" },
                    "x": { "signal": "-30" },
                    "y": { "signal": " -50" },
                    "fontSize": { "value": 24 }
                }
            }
        },
        {   
            "description": "the bars",
            "type": "rect",
            "from": {"data": "dataFiltered"},
            "encode": {
                "update": {
                    "y": {"field": "Month", "scale": "scaleY"},
                    "height": {"band": 1, "scale": "scaleY"},
                    "x": {"field": "Month", "scale": "scaleX"},
                    "x2": {"value": 0 }
                }
            }
        }
    ]
}

修改说明 #

在counter信号的on事件数组中，新增了针对dblclick.shiftKey事件的处理条目并放在普通dblclick事件之前（确保优先匹配带Shift键的双击操作），当用户按住Shift键双击时，直接把counter设置为length(data('indexAll'))（即数据最大值6），满足需求。

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