为什么在这个维加莱特图中,这样的编码被拆分?

问题描述 投票:1回答:1

在带有标尺样式工具提示的多线图中,他们将编码分成三层,并在外层内嵌套一层。

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通道的层之外进行编码。然后,他们在第一层内部添加编码,定义ycolor通道。然后,他们似乎在该外层inside中嵌套一层并定义显示的点?最后,他们添加了第二层来定义工具提示。

但是我不明白的是

  1. encoding块在layers数组之外的点是什么。这有什么作用?为什么要像这样拆分encoding

  2. 外层中有一层,为什么?

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

javascript vega vega-lite
1个回答
0
投票

1]该编码块在layers数组之外的点是什么。这有什么作用?

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

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

它只包含大量重复的等效编码。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.