如何通过Vega中的滑块更改条形图的宽度

Question

我有一个 Vega 图，我需要根据三角形滑块更改矩形的条形宽度。

代码：

{
  "$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": "stack", "groupby": ["x"], "field": "y"}]
    }
  ],
   "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": {"data": "filtered-table", "field": "y1"}
    },
    {
      "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},
          "x": {"scale": "x", "field": "y0"},
          "x2": {"scale": "x", "field": "y1"},
          "fill": {"scale": "color", "field": "c"}
        },
        "update": {"fillOpacity": {"value": 1}},
        "hover": {"fillOpacity": {"value": 0.5}}
      }
    },

    {
      "name": "handle",
      "type": "symbol",
      "encode": {
        "enter": {
          "y": {"scale": "x", "value":0, "offset": -7},
          "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"}}
      }
    }
  ]
}

三角形滑块位于 x 轴上，值为 20，滑块范围为 (0-40)，因此滑块不能移动到该范围之外。

我想要的预期结果是：当三角形滑块移动到 x 轴上的 30 值时，蓝色矩形应从 (0-30) 更新，橙色矩形应更新为 (31-40) 。

预期结果：

Answer 1

{
  "$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": "y", "expr": "datum.c=='case1'?currentYear:datum.c=='case2'?40-currentYear:datum.y"},
        
        {"type": "stack", "groupby": ["x"], "field": "y"}
      ]
    }
  ],
   "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": {"data": "filtered-table", "field": "y1"}
    },
    {
      "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": {
        "update": {
          "y": {"scale": "y", "field": "x"},
          "height": {"scale": "y", "band": 1, "offset": -1},
          "x": {"scale": "x", "field": "y0"},
          "x2": {"scale": "x", "field": "y1"},
          "fill": {"scale": "color", "field": "c"}
      
      ,"fillOpacity": {"value": 1}},
        "hover": {"fillOpacity": {"value": 0.5}}
      }
    },

    {
      "name": "handle",
      "type": "symbol",
      "encode": {
        "enter": {
          "y": {"scale": "x", "value":0, "offset": -7},
          "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"}}
      }
    }
  ]
}