我正在尝试创建组合选择,以突出显示悬停的线和该特定线上最接近选择的点。但是,当线路选择未更改时,我遇到了问题。就像当鼠标光标进入图表时,其中一条线突出显示,并且将鼠标悬停在另一条线上时,不会删除此选择。如果有人可以帮助我找出问题所在?
这里是行为link损坏的图表的示例
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Multi-series line chart with labels and interactive highlight on hover. We also set the selection's initial value to provide a better screenshot",
"data": {"url": "data/stocks.csv"},
"encoding": {
"x": {"field": "date", "type": "temporal", "title": "date"},
"y": {"field": "price", "type": "quantitative", "title": "price"},
"color": {
"condition": {
"selection": "hover",
"field": "symbol",
"type": "nominal",
"legend": null
},
"value": "grey"
},
"opacity": {"condition": {"selection": "hover", "value": 1}, "value": 0.2}
},
"layer": [
{
"description": "transparent layer to make it easier to trigger selection",
"selection": {
"hover": {
"type": "single",
"on": "mouseover",
"clear": "mouseout",
"nearest": false,
"empty": "all",
"fields": ["symbol"]
}
},
"mark": {"type": "line", "strokeWidth": 8, "stroke": "transparent"}
},
{
"layer": [
{"mark": "line"},
{
"transform": [{"filter": {"and": [{"selection": "hover"}]}}],
"selection": {
"closestPoint": {
"type": "single",
"on": "mouseover",
"clear": "mouseout",
"nearest": true,
"empty": "none",
"encodings": ["x"],
"fields": ["date"]
}
},
"mark": "point",
"encoding": {
"tooltip": {"field": "date"},
"size": {
"condition": {"selection": "closestPoint", "value": 40},
"value": 0
}
}
}
]
}
],
"config": {"view": {"stroke": null}}
}