我有一个织女星水平条形图与滑块动态改变的值在X轴上.
当鼠标指针悬停在滑块(三角形符号)上时，最初什么都不会发生，并且无法移动滑块. 为了向左或向右滑动，首先我需要点击它，只有在那之后才有可能进行滑动.
预期的行为是将鼠标指针转换为手形，并在发生悬停时使滑块直接移动.
我有一个织女星水平条形图与滑块动态改变的值在X轴上.
当鼠标指针悬停在滑块(三角形符号)上时，最初什么都不会发生，并且无法移动滑块. 为了向左或向右滑动，首先我需要点击它，只有在那之后才有可能进行滑动.
预期的行为是将鼠标指针转换为手形，并在发生悬停时使滑块直接移动.
在Enter键上对标记进行填充.
{
"$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": {}
}