Vega-Lite：悬停单元格时交叉线 - 热图

Question

我正在尝试使用 Vega-Lite 制作交互式热图。我想在悬停单元格时显示交叉线以提出 Y 轴和 X 轴标签。事实上，我知道可以显示工具提示，但这不是我要搜索的内容。可以吗（因为我没找到办法）？

Here's what I'm trying to do...

下面是代码和editor:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "background": "#fbfbfb",
  "width": "container",
  "height": "container",
  "data": {
    "values": [
      {"ProjectKey": "RAS", "LinkedProjectKey": "LRAS", "Metric": 20},
      {"ProjectKey": "COS", "LinkedProjectKey": "LRAS", "Metric": 10},
      {"ProjectKey": "RAS", "LinkedProjectKey": "COS", "Metric": 7},
      {"ProjectKey": "LRAS", "LinkedProjectKey": "SIN", "Metric": 12},
      {"ProjectKey": "COS", "LinkedProjectKey": "SIN", "Metric": 4},
      {"ProjectKey": "LRAS", "LinkedProjectKey": "TAN", "Metric": 17}
    ]
  },
  "encoding": {
    "y": {
      "field": "ProjectKey",
      "type": "nominal",
      "axis": {"labelLimit": 100}
    },
    "x": {
      "field": "LinkedProjectKey",
      "type": "nominal",
      "axis": {"labelAngle": -25, "labelLimit": 75}
    }
  },
  "layer": [
    {
      "mark": {"type": "rect", "tooltip": true},
      "encoding": {
        "color": {
          "aggregate": "sum",
          "field": "Metric",
          "type": "quantitative",
          "scale": {"range": ["lightblue", "lightgreen", "#ff7f7f"]},
          "title": "Number of Metric"
        }
      }
    },
    {
      "mark": {"type": "text", "tooltip": true},
      "encoding": {
        "text": {"field": "Metric", "type": "quantitative"},
        "color": {"value": "black"}
      }
    }
  ]
}

你能帮帮我吗？提前致谢！ ^^

Answer 1

您需要再创建 2 个具有 rule 标记的图层。每个都有一个常量 x 和 y 分开以覆盖整条线。然后在鼠标悬停的 select 参数上可以设置颜色条件，并使其他规则透明，只显示悬停的线。参考代码和 editor:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "background": "#fbfbfb",
  "width": "container",
  "height": "container",
  "data": {
    "values": [
      {"ProjectKey": "RAS", "LinkedProjectKey": "LRAS", "Metric": 20},
      {"ProjectKey": "COS", "LinkedProjectKey": "LRAS", "Metric": 10},
      {"ProjectKey": "RAS", "LinkedProjectKey": "COS", "Metric": 7},
      {"ProjectKey": "LRAS", "LinkedProjectKey": "SIN", "Metric": 12},
      {"ProjectKey": "COS", "LinkedProjectKey": "SIN", "Metric": 4},
      {"ProjectKey": "LRAS", "LinkedProjectKey": "TAN", "Metric": 17}
    ]
  },
  "encoding": {
    "y": {
      "field": "ProjectKey",
      "type": "nominal",
      "axis": {"labelLimit": 100}
    },
    "x": {
      "field": "LinkedProjectKey",
      "type": "nominal",
      "axis": {"labelAngle": -25, "labelLimit": 75}
    }
  },
  "transform": [{"calculate": "1", "as": "ruleLine"}],
  "layer": [
    {
      "params": [
        {
          "name": "highlight",
          "select": {
            "type": "point",
            "on": "mouseover",
            "encodings": ["x", "y"]
          }
        },
        {"name": "select", "select": "point"}
      ],
      "mark": {"type": "rect", "tooltip": true},
      "encoding": {
        "color": {
          "aggregate": "sum",
          "field": "Metric",
          "type": "quantitative",
          "scale": {"range": ["lightblue", "lightgreen", "#ff7f7f"]},
          "title": "Number of Metric"
        }
      }
    },
    {
      "mark": {"type": "text", "tooltip": true},
      "encoding": {
        "y": {"field": "ProjectKey", "type": "nominal", "axis": null},
        "x": {"field": "LinkedProjectKey", "type": "nominal", "axis": null},
        "text": {"field": "Metric", "type": "quantitative"},
        "color": {"value": "black"}
      }
    },
    {
      "mark": {"type": "rule", "tooltip": true, "line": true},
      "encoding": {
        "x": {"field": "LinkedProjectKey", "type": "nominal", "axis": null},
        "y": {"field": "ruleLine", "type": "quantitative", "axis": null},
        "color": {
          "condition": [{"param": "highlight", "empty": false, "value": "red"}],
          "value": "transparent"
        }
      }
    },
    {
      "mark": {"type": "rule", "tooltip": true, "color": "red", "line": true},
      "encoding": {
        "y": {"field": "ProjectKey", "type": "nominal", "axis": null},
        "x": {"field": "ruleLine", "type": "quantitative", "axis": null},
        "color": {
          "condition": [{"param": "highlight", "empty": false, "value": "red"}],
          "value": "transparent"
        }
      }
    }
  ]
}

Vega-Lite：悬停单元格时交叉线 - 热图

Vega-Lite : Cross lines when hovering a cell - Heatmap

vega-lite