Я взял обзор + отображение пример и попытался скомбинировать его с меткой правила, которая появляется, если над ней навести курсор мыши.Аналогично выбору пример .
Это - моя спецификация в редакторе, и здесь для полноты:
{
"$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
}
}
}
Ожидаемое поведение:
Когда я выбираю интервал в обзорной диаграмме, детальная диаграмма меняет свою область, и когда я наводю курсор мыши на детальную диаграмму, появляются правила, ближайшие к точкам даты.
Фактическое поведение:
Правила отображаются правильно, если не выбран интервал выбора.После выбора интервала на обзорной диаграмме правила просто отображаются, если указатель мыши находится в диапазоне интервала, нарисованном на обзорной диаграмме, как если бы выбор правил искал ближайшие точки из обзора.
Мое предположение:
Масштаб «подсказки-выбора» не использует фактический масштаб детальной диаграммы, чтобы определить, где находятся ближайшие точки.Как мне этого добиться?