如何使鼠标指针悬停在 vega 上的 mark 符号可点击

Question

我有一个 vega 水平条形图，其中滑块动态更改 x 轴上的值。

代码

当鼠标指针悬停在滑块（三角形符号）上时，最初没有任何反应，并且无法移动滑块。 为了向左或向右滑动它，首先我需要点击它，然后才可以进行滑动。

预期的行为是将鼠标指针隐藏到手上，并在发生悬停时使滑块直接移动。

Answer 1

输入时填写标记。

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 700,
  "height": 50,
  "padding": 5,
  "signals": [
    {
      "name": "currentYear0",
      "value": 350,
      "on": [
        {
          "events": "[@handle0:mousedown, window:mouseup] > window:mousemove!",
          "update": "clamp(invert('x', clamp(x(), 0, width)),0, currentYear1-5)"
        }
      ]
    },
    {
      "name": "currentYear1",
      "value": 700,
      "on": [
        {
          "events": "[@handle1:mousedown, window:mouseup] > window:mousemove!",
          "update": "clamp(invert('x', clamp(x(), currentYear0-5, width)),currentYear0-5, 700)"
        }
      ]
    }
  ],
  "scales": [
    {"name": "y", "type": "band", "range": "height", "domain": [1]},
    {"name": "x", "type": "linear", "range": "width", "domain": [0, 700]}
  ],
  "marks": [
    {
      "name": "rect0",
      "type": "rect",
      "encode": {
        "update": {
          "y": {"scale": "y", "value": "0"},
          "height": {"scale": "y", "band": 1, "offset": -1},
          "x": {"scale": "x", "signal": "0"},
          "x2": {"scale": "x", "signal": "currentYear0"},
          "fill": {"value": "#084d95"},
          "fillOpacity": {"value": 1}
        },
        "hover": {"fillOpacity": {"value": 0.5}}
      }
    },
    {
      "name": "rect1",
      "type": "rect",
      "encode": {
        "update": {
          "y": {"scale": "y", "value": "0"},
          "height": {"scale": "y", "band": 1, "offset": -1},
          "x": {"scale": "x", "signal": "currentYear0"},
          "x2": {"scale": "x", "signal": "700"},
          "fill": {"value": "#0ceebb"},
          "fillOpacity": {"value": 1}
        },
        "hover": {"fillOpacity": {"value": 0.5}}
      }
    },
    {
      "name": "handle0",
      "type": "symbol",
      "encode": {
        "enter": {
          "y": {"scale": "x", "value": 0, "offset": -7},
          "shape": {"value": "triangle-down"},
          "size": {"value": 400},
          "stroke": {"value": "#000"},
          "x": {"scale": "x", "field": "y0"},
          "x2": {"scale": "x", "field": "y1"},
          "strokeWidth": {"value": 0.5},
           "fill": {"value": "red"}
        },
        "update": {"x": {"scale": "x", "signal": "currentYear0"}},
        "hover": {
          "fill": {"value": "lemonchiffon"},
          "cursor": {"value": "pointer"}
        }
      }
    },
    {
      "type": "text",
      "encode": {
        "enter": {
          "y": {"value": -20},
          "fontSize": {"value": 16},
          "fontWeight": {"value": "bold"},
          "fill": {"value": "steelblue"},
          "align": {"value": "left"},
          "baseline": {"value": "middle"},
          "angle": {"value": -90},
          "format": ",.2s"
        },
        "update": {
          "text": {"signal": "format(currentYear0,'.1f')"},
          "x": {"scale": "x", "signal": "currentYear0"}
        }
      }
    }
  ],
  "config": {}
}