我使用了概述+显示example,并尝试将其与一个规则标记结合使用,如果鼠标悬停在该标记上,则会显示该标记。类似于最近选择的example。
This是我在编辑器中的规格,此处出于完整性考虑:
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"data": {
"values": [
{"date": 1541044448046, "symbol": "A", "value": 1},
{"date": 1541045448046, "symbol": "A", "value": 2},
{"date": 1541046448046, "symbol": "A", "value": 5},
{"date": 1541047448046, "symbol": "A", "value": 3},
{"date": 1541048448046, "symbol": "A", "value": 2},
{"date": 1541049448046, "symbol": "A", "value": 1},
{"date": 1541050448046, "symbol": "A", "value": 6},
{"date": 1541044448046, "symbol": "B", "value": 7},
{"date": 1541045448046, "symbol": "B", "value": 3},
{"date": 1541046448046, "symbol": "B", "value": 2},
{"date": 1541047448046, "symbol": "B", "value": 6},
{"date": 1541048448046, "symbol": "B", "value": 4},
{"date": 1541049448046, "symbol": "B", "value": 6},
{"date": 1541050448046, "symbol": "B", "value": 1}
]
},
"vconcat": [
{
"width": 600,
"height": 300,
"encoding": {
"x": {
"type": "temporal",
"field": "date",
"scale": {
"domain": {
"selection": "brush-selection"
}
},
"axis": {
"title": ""
}
}
},
"layer": [
{
"mark": {
"type": "line"
},
"encoding": {
"y": {
"field": "value",
"type": "quantitative",
"scale": {
"zero": false
}
},
"color": {
"field": "symbol",
"type": "nominal"
}
}
},
{
"mark": "point",
"encoding": {
"opacity": {
"value": 0
}
},
"selection": {
"tooltip-selection": {
"type": "single",
"nearest": true,
"encodings": ["x"],
"on": "mousemove",
"empty": "none"
}
}
},
{
"mark": {
"type": "point"
},
"encoding": {
"color": {
"type": "nominal",
"field": "symbol"
},
"opacity": {
"condition": {
"selection": "tooltip-selection",
"value": 1
},
"value": 0
},
"y": {
"type": "quantitative",
"field": "value"
}
}
},
{
"mark": {
"type": "rule",
"color": "gray"
},
"transform": [
{
"filter": {
"selection": "tooltip-selection"
}
}
]
}
]
},
{
"width": 600,
"height": 60,
"mark": "area",
"selection": {
"brush-selection": {
"type": "interval",
"encodings": [
"x"
]
}
},
"encoding": {
"x": {
"field": "date",
"type": "temporal"
},
"y": {
"field": "value",
"type": "quantitative",
"axis": {
"tickCount": 3,
"grid": false
},
"scale": {
"zero": false
}
}
}
}
],
"config": {
"axisY": {
"minExtent": 30
}
}
}
预期行为:
当我在概览图表中选择一个间隔时,详细图表将重新调整其范围,当我将鼠标悬停在详细图表上时,将显示最接近日期点的规则。
实际行为:
未应用间隔选择时,规则会正确显示。在概览图上选择一个间隔后,如果鼠标在概览图上绘制的间隔范围内徘徊,规则就会显示出来,就好像规则的选择是在概览中寻找最近的点。>
我的猜测:
“工具提示选择”的比例未使用详细图表的实际比例来确定最接近点的位置。我该如何实现?