如何通过三角形滑块调整Vega条形图的矩形宽度

需求说明 #

• 现有Vega图表通过三角形滑块（可移动范围0-40）控制条形宽度
• 目标效果：滑块移动至X轴数值30时，蓝色矩形（对应case1）范围更新为0-30，橙色矩形（对应case2）范围更新为31-40

修改后的完整代码 #

{"$schema": "https://vega.github.io/schema/vega/v4.json", "width": 400, "height": 50, "padding": 5, "data": [{"name": "table", "values": [{"x": "Download data (.csv)", "c": "case1", "y": 20}, {"x": "Download data (.csv)", "c": "case2", "y": 20}, {"x": "Download data (.csv)", "c": "case3", "y": 20}, {"x": "Download data (.csv)", "c": "case4", "y": 20}, {"x": "Download data (.csv)", "c": "case5", "y":20}]}, {"name": "filtered-table", "source": "table", "transform": [{"type": "formula", "as": "adjustedY0", "expr": "datum.c === 'case1' ? 0 : (datum.c === 'case2' ? currentYear + 1 : datum.y0)"}, {"type": "formula", "as": "adjustedY1", "expr": "datum.c === 'case1' ? currentYear : (datum.c === 'case2' ? 40 : datum.y1)"}]}], "signals": [{"name": "dragging", "value": false, "on": [{"events": "@handle:mousedown", "update": "true"}, {"events": "window:mouseup", "update": "false"}]}, {"name": "handleYear", "value": 20, "on": [{"events": "[@handle:mousedown, window:mouseup] > window:mousemove!", "update": "invert('x', clamp(x(), 0, width))"}]}, {"name": "currentYear", "update": "clamp(handleYear, 0, 40)"}], "scales": [{"name": "y", "type": "band", "range": "height", "domain": {"data": "filtered-table", "field": "x"}}, {"name": "x", "type": "linear", "range": "width", "domain": [0, 40]}, {"name": "color", "type": "ordinal", "range": ["darkblue", "orange", "lightgrey", "red", "green"], "domain": {"data": "filtered-table", "field": "c"}}], "axes": [{"orient": "left", "scale": "y", "ticks": false, "labelPadding": 5}, {"orient": "bottom", "scale": "x", "ticks": false, "labelPadding": 5}], "marks": [{"type": "rect", "from": {"data": "filtered-table"}, "encode": {"enter": {"y": {"scale": "y", "field": "x"}, "height": {"scale": "y", "band": 1, "offset": -1}, "fill": {"scale": "color", "field": "c"}}, "update": {"x": {"scale": "x", "field": "adjustedY0"}, "x2": {"scale": "x", "field": "adjustedY1"}, "fillOpacity": {"value": 1}}, "hover": {"fillOpacity": {"value": 0.5}}}}, {"name": "handle", "type": "symbol", "encode": {"enter": {"y": {"value": height/2}, "shape": {"value": "triangle-down"}, "size": {"value": 400}, "stroke": {"value": "#000"}, "strokeWidth": {"value": 0.5}}, "update": {"x": {"scale": "x", "signal": "currentYear"}, "fill": {"signal": "dragging ? 'lemonchiffon' : '#fff'"}}, "hover": {"fill": {"value": "lemonchiffon"}, "cursor": {"value": "pointer"}}}}, {"type": "text", "encode": {"enter": {"y": {"value": -20}, "x": {"value": 25}, "fontSize": {"value": 32}, "fontWeight": {"value": "bold"}, "fill": {"value": "steelblue"}}, "update": {"text": {"signal": "currentYear"}}}}]}

关键修改点 #

• 数据变换逻辑：移除原有的stack变换，新增两个formula变换，根据currentYear信号动态计算case1和case2的起始（adjustedY0）和结束（adjustedY1）值：
  • case1的范围固定为0到currentYear
  • case2的范围固定为currentYear + 1到40
  • 其他case保持原有堆叠范围
• X轴刻度域：将X轴的domain从基于数据的动态计算改为固定[0,40]，确保滑块移动范围与刻度匹配
• 滑块Y轴定位：修正滑块的y值为height/2，使其显示在条形的垂直中心位置

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