在Vega-Lite中的概述+细节显示上应用选择

Question

我以总览+显示示例为例 ，尝试将其与规则标记结合使用，如果鼠标悬停在其上，则该标记会显示出来。 类似于最近选择的示例 。

这是我在编辑器中的规范，此处出于完整性考虑：

{
  "$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
    }
  }
}

预期的行为：

当我在概览图表中选择一个间隔时，详细图表将重新调整其范围，当我将鼠标悬停在详细图表上时，将显示最接近日期点的规则。

实际行为：

没有应用间隔选择时，规则会正确显示。 在概览图上选择一个间隔后，如果鼠标在概览图上绘制的间隔范围内徘徊，规则就会显示出来，就好像规则的选择是在概览中寻找最近的点一样。

我猜：

“工具提示选择”的比例不使用详细图表的实际比例来确定最接近点的位置。 我该如何实现？

Answer 1

此问题已在https://github.com/vega/vega-lite/pull/4289中修复，现在可以使用。 请参阅此示例 。