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

Posted 2023-02-16

【中文标题】为啥在这个 vega-lite 图中编码是这样拆分的？

【英文标题】：Why are the encodings split up like this in this vega-lite graph?为什么在这个 vega-lite 图中编码是这样拆分的？

【发布时间】：2020-07-17 03:26:53

【问题描述】：

在这个带有标尺样式工具提示的多线图中，他们将编码拆分为三层，并将一层嵌套在外层中。

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 通道。然后他们似乎在这个外层 inside 嵌套了一层并定义了显示的点？最后，他们添加了第二层来定义工具提示。

我不明白的是

encoding 位于 layers 数组之外的块有什么意义。这个有什么效果？为什么要这样拆分encoding？

外层里面有一层，为什么？

文档似乎没有解释任何这些。

【参考方案1】：

1) 这个编码块在层数组之外的意义是什么。这有什么效果？

层之上的编码被层中的每个子图继承。

2) 为什么要这样拆分编码。外层里面有一层，为什么？

您可能会使用这样的多层结构的主要原因是避免重复编码规范。您可以通过将所有编码移动到每一层并使用单层语句来创建等效结果，如下所示 (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"
        
      
    
  ]

它只是涉及大量重复等效编码。