Как я могу получить доступ к информации из нескольких наборов данных во всплывающей подсказке на Vega?

Question

У меня есть урезанная схема Vega, в которой я передаю несколько объектов набора данных (массив 'values') , чтобы они отображались один под другим. То, с чем я боролся в течение нескольких дней:

1. Я бы хотел, чтобы в каждой всплывающей подсказке отображалось значение 'y' всех доступных графиков, соответственно, для 'x 'значение времени, в котором наведен курсор мыши (и появляется всплывающая подсказка).
2. Кроме того, я бы хотел, чтобы каждый соответствующий «символ» отображался на вертикальной оси (в дополнение к тому, который уже отображается при наведении курсора мыши).

Возможно ли это вообще?

Некоторые из моих неудачных попыток включали:

• Я пытался преобразовать данные в таблицу с моей меткой времени ('x') в качестве ключа индекса, поэтому я могу получить к ней доступ при наведении курсора мыши, но не смог найти способ сделать этот индекс карты на vega.

• Я также пробовал вариант этого примера, используя эту подвижную метку «правило», но все еще не мог заставить его работать для нескольких наборов данных, как моя реализация. https://vega.github.io/vega/examples/quantile-dot-plot/

• Другим хорошим возможным решением было бы что-то вроде приведенного ниже примера, но все же оно для vega-lite и не может заставить его работать. vega, плюс для нескольких наборов данных. https://vega.github.io/editor/# / examples / vega-lite / interactive_multi_line_pivot_tooltip

Есть еще идеи? Спасибо.

https://vega.github.io/editor/# / отредактировано

{
  "width": 1200,
  "height": 300,
  "data": [
    {
      "name": "dataset",
      "values": [
        {
          "key": "123",
          "subvalues": [

            {"x": 1585447801000, "y": 853.7},
            {"x": 1585447920000, "y": 853.7},
            {"x": 1585448040000, "y": 581.4},
            {"x": 1585448160000, "y": 581.4}
          ]
        },
        {
          "key": "456",
          "subvalues": [
            {"x": 1585447801000, "y": 200.7},
            {"x": 1585447920000, "y": 100.7},
            {"x": 1585448040000, "y": 200.4},
            {"x": 1585448160000, "y": 100.4}
          ]
        }
      ]
    },
    {
      "name": "dataset2",
      "source": "dataset",
      "transform": [
        {"type": "identifier", "as": "id"},
        {"type": "flatten", "fields": ["subvalues"]},
        {
          "type": "project",
          "fields": ["key", "subvalues.x", "subvalues.y", "id"],
          "as": ["key", "x", "y", "id"]
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "utc",
      "range": "width",
      "domain": {"data": "dataset2", "field": "x"}
    },
    {
      "name": "y",
      "type": "linear",
      "domain": {"data": "dataset2", "field": "y"}
    }
  ],
  "marks": [
    {
      "type": "group",
      "from": {
        "facet": {"name": "series", "data": "dataset2", "groupby": "id"}
      },
      "encode": {
        "enter": {
          "y": {
            "signal": "((datum.id - data('dataset').length) * (height + 30))"
          },
          "y2": {
            "signal": "((datum.id - data('dataset').length) * (height + 30))"
          }
        }
      },
      "scales": [
        {
          "name": "ys",
          "type": "linear",
          "range": "height",
          "domain": {"data": "series", "field": "y"}
        }
      ],
      "axes": [
        {"orient": "left", "scale": "ys"},
        {
          "orient": "bottom",
          "scale": "x",
          "offset": {"signal": "height"}
        }
      ],
      "marks": [
        {
          "type": "line",
          "from": {"data": "series"},
          "encode": {
            "enter": {
              "x": {"scale": "x", "field": "x"},
              "y": {"scale": "ys", "field": "y"}
            }
          }
        },
        {
          "type": "symbol",
          "from": {"data": "series"},
          "encode": {
            "enter": {
              "x": {"scale": "x", "field": "x"},
              "y": {"scale": "ys", "field": "y"},
              "tooltip": [
                {
                  "signal": "{Date: utcFormat(datum.x, '%Y-%m-%d, %H:%M:%S'), Value: datum.y}"
                }
              ],
              "cursor": {"value": "pointer"}
            },
            "update": {"fill": {"value": "rgba(0,0,0,0)"}},
            "hover": {"fill": {"value": "#4C78A8"}}
          }
        }
      ]
    }
  ]
}