在带有标尺样式工具提示的多线图中,他们将编码分成三层,并在外层内嵌套一层。
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]该编码块在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"
}
}
}
]
}
它只包含大量重复的等效编码。