为什么在这个 vega-lite 图中编码是这样拆分的？

Question

In this multi-line graph with a ruler style tooltip they split up the encoding between three layers & nest a layer inside an outer layer.

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

Specifically:

 "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": { ... }
      }
    }

There's an encoding first outside the layers defining the x channel. Then they add an encoding inside the first layer, defining the y & color channels. Then they seem to nest a layer inside this outer layer and define the points that show up? Finally they add a second layer to define the tooltip.

What i'm not understanding however is

1. What the point of this encoding block that is outside of the layers array. Whats the effect of this? Why split up the encoding like this?

2. There's a layer inside an outer layer, why?

The docs don't seem to explain any of this.

Answer 1

1) What the point of this encoding block that is outside of the layers array. Whats the effect of this?

Encodings above the layer are inherited by every subchart in the layer.

2) Why split up the encoding like this. There's a layer inside an outer layer, why?

The main reason you might use a multi-layer structure like this is to avoid repetition of encoding specifications. You could create an equivalent result by moving all encodings into each layer, and using a single layer statement, like this ( view in editor ):

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

It just involves a lot of repetition of equivalent encodings.