Почему кодировки разделены так на этом графике vega-lite? - PullRequest
Новая
       68

Почему кодировки разделены так на этом графике vega-lite?

1 голос
/ 05 апреля 2020

В этом многострочном графике с подсказкой в ​​стиле линейки они разделяют кодировку между тремя слоями и вкладывают слой во внешний слой.

https://vega.github.io/vega-lite/examples/interactive_multi_line_pivot_tooltip.html

В частности: 

 "encoding": {"x": {"field": "date", "type": "temporal"}},
  "layer": [
    {
      "encoding": {
        "color": {"field": "symbol", "type": "nominal"},
        "y": {"field": "price", "type": "quantitative"}
      },
      "layer": [
        {"mark": "line"},
        {"transform": [{"filter": {"selection": "hover"}}], "mark": "point"}
      ]
    },
    {
      "transform": [{"pivot": "symbol", "value": "price", "groupby": ["date"]}],
      "mark": "rule",
      "encoding": {
        "opacity": {
          "condition": {"value": 0.3, "selection": "hover"},
          "value": 0
        },
        "tooltip": [ ... ],
        "selection": { ... }
      }
    }

За пределами слоев сначала идет кодирование, определяющее канал x. Затем они добавляют кодировку внутри первого слоя, определяя каналы y & color. Тогда они, кажется, вкладывают слой в этот внешний слой и определяют точки, которые появляются? Наконец, они добавляют второй слой для определения всплывающей подсказки.

Однако я не понимаю, что такое

  1. Какой смысл этого блока encoding, который находится за пределами массив layers. Каков эффект этого? Зачем разделять encoding, как это?

  2. Есть слой внутри внешнего слоя, почему?

Документы не кажутся объяснить что-либо из этого.

1 Ответ

2 голосов
/ 05 апреля 2020

1) Какой смысл этого блока кодирования, который находится за пределами массива слоев. Каков эффект этого?

Кодировки над уровнем наследуются каждой подкартой в слое.

2) Зачем разделять кодировку следующим образом. Слой внутри внешнего слоя, почему?

Основная причина, по которой вы можете использовать такую ​​многослойную структуру, состоит в том, чтобы избежать повторения спецификаций кодирования. Вы можете создать эквивалентный результат, переместив все кодировки в каждый слой и используя одну инструкцию уровня, например: ( представление в редакторе ): 

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/stocks.csv"},
  "width": 400,
  "height": 300,
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"},
        "color": {"field": "symbol", "type": "nominal"}
      }
    },
    {
      "transform": [{"filter": {"selection": "hover"}}],
      "mark": "point",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"},
        "color": {"field": "symbol", "type": "nominal"}
      }
    },
    {
      "transform": [{"pivot": "symbol", "value": "price", "groupby": ["date"]}],
      "mark": "rule",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "opacity": {
          "condition": {"value": 0.3, "selection": "hover"},
          "value": 0
        },
        "tooltip": [
          {"field": "AAPL", "type": "quantitative"},
          {"field": "AMZN", "type": "quantitative"},
          {"field": "GOOG", "type": "quantitative"},
          {"field": "IBM", "type": "quantitative"},
          {"field": "MSFT", "type": "quantitative"}
        ]
      },
      "selection": {
        "hover": {
          "type": "single",
          "fields": ["date"],
          "nearest": true,
          "on": "mouseover",
          "empty": "none",
          "clear": "mouseout"
        }
      }
    }
  ]
}

Это просто включает в себя много повторение эквивалентных кодировок.

...