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

时间:2019-02-03 17:27:00

标签: javascript data-visualization vega vega-lite

我使用了概述+显示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
    }
  }
}

预期行为:

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

实际行为:

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

我的猜测:

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

0 个答案:

没有答案