Vega-Lite: Пересекаются линии при наведении курсора на ячейку — Тепловая карта

avatar
Ryan Verlande
1 июля 2021 в 15:52
86
1
0

Я пытаюсь создать интерактивную тепловую карту с помощью Vega-Lite. Я хочу показать поперечные линии при наведении курсора на ячейку, чтобы выдвинуть метки оси Y и оси X. Действительно, я знаю, что можно отобразить всплывающую подсказку, но это не то, что я ищу. Возможно ли это (потому что я не нашел способ сделать это)?

Вот что я пытаюсь сделать...

Ниже приведен код и редактор:

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

Вы можете мне помочь? Заранее спасибо! ^^

Источник
wahab memon
2 июля 2021 в 05:14
0

Можете ли вы добавить образец, чтобы мы могли попробовать решить вашу проблему?

Ryan Verlande
5 июля 2021 в 08:26
0

@wahabmemon Кажется, я не могу редактировать пост.. [Вот ссылка с образцом](shorturl.at/abN15)

wahab memon
5 июля 2021 в 08:31
0

При наведении на ячейку вам просто нужны красные линии, отображаемые на изображении, верно?

Ryan Verlande
5 июля 2021 в 08:56
1

Да, если это возможно, я хочу отображать красные линии, чтобы показать ось метки. Например, я навожу курсор на ячейку COS/SIN, она отображает красные линии и выдвигает метку COS и метку SIN. Не знаю понятно ли 😅

Ответы (1)

avatar
wahab memon
5 июля 2021 в 12:46
2

Вам нужно создать еще 2 слоя с отметками rule. Каждый имеет константу x и y отдельно, чтобы покрыть всю строку. Затем в параметрах select при наведении мыши вы можете установить цветовые условия и сделать другое правило прозрачным и отображать только наведенную строку. См. код и редактор:

{
  "$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"
        }
      }
    }
  ]
}
Ryan Verlande
6 июля 2021 в 09:24
1

Большое спасибо за помощь, это именно то, что мне было нужно!