[英]Vega-lite: field appears in the wrong chart?
我在 Vega Lite 中看到一种我无法理解的奇怪行为。
以这个示例图表为例:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {
"values": [
{"model": "Sedan", "color": "Red", "sales": 28},
{"model": "Sedan", "color": "Silver", "sales": 17},
{"model": "Sedan", "color": "Black", "sales": 34},
{"model": "Pickup", "color": "Red", "sales": 20},
{"model": "Pickup", "color": "Silver", "sales": 71},
{"model": "Pickup", "color": "Black", "sales": 14},
{"model": "Minivan", "color": "Red", "sales": 52},
{"model": "Minivan", "color": "Silver", "sales": 31},
{"model": "Minivan", "color": "Black", "sales": 45}
]
},
"concat": [{
"mark": "bar",
"encoding": {
"x": {"field": "model"},
"y": {"aggregate": "sum", "field": "sales"}
}
},{
"mark": "arc",
"encoding": {
"color": {"field": "color"},
"theta": {"aggregate": "sum", "field": "sales"}
}
}]
}
结果很简单:
现在,观察当我在第一个图表的转换部分生成一个新字段“标志”以突出显示特定柱(拾取)时会发生什么:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {
"values": [
{"model": "Sedan", "color": "Red", "sales": 28},
{"model": "Sedan", "color": "Silver", "sales": 17},
{"model": "Sedan", "color": "Black", "sales": 34},
{"model": "Pickup", "color": "Red", "sales": 20},
{"model": "Pickup", "color": "Silver", "sales": 71},
{"model": "Pickup", "color": "Black", "sales": 14},
{"model": "Minivan", "color": "Red", "sales": 52},
{"model": "Minivan", "color": "Silver", "sales": 31},
{"model": "Minivan", "color": "Black", "sales": 45}
]
},
"concat": [{
"mark": "bar",
"transform": [
{"calculate": "datum.model == 'Pickup'", "as": "flag"} // <- "flag" defined here
],
"encoding": {
"x": {"field": "model"},
"y": {"aggregate": "sum", "field": "sales"},
"color": {"field": "flag"} // <- and used here
}
},{
"mark": "arc", // <- the second chart
"encoding": { // shouldn't even see
"color": {"field": "color"}, // the new "flag" field
"theta": {"aggregate": "sum", "field": "sales"} //
}
}]
}
该标志有效(拾取栏突出显示)但即使我在第一个图表的上下文中定义它,它也会影响第二个图表及其图例:
这是一个错误吗? 我是否误解了 Vega Lite 工作原理的一些非常基本的东西?
问题是在复合图表中,Vega-Lite 默认使用共享比例(请参阅比例和指南分辨率)。
如果你想让你的色标独立,你可以设置
"resolve": {"scale": {"color": "independent"}}
完整的规范看起来像这样( 在编辑器中查看):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {
"values": [
{"model": "Sedan", "color": "Red", "sales": 28},
{"model": "Sedan", "color": "Silver", "sales": 17},
{"model": "Sedan", "color": "Black", "sales": 34},
{"model": "Pickup", "color": "Red", "sales": 20},
{"model": "Pickup", "color": "Silver", "sales": 71},
{"model": "Pickup", "color": "Black", "sales": 14},
{"model": "Minivan", "color": "Red", "sales": 52},
{"model": "Minivan", "color": "Silver", "sales": 31},
{"model": "Minivan", "color": "Black", "sales": 45}
]
},
"concat": [
{
"mark": "bar",
"transform": [{"calculate": "datum.model == 'Pickup'", "as": "flag"}],
"encoding": {
"x": {"field": "model"},
"y": {"aggregate": "sum", "field": "sales"},
"color": {"field": "flag"}
}
},
{
"mark": "arc",
"encoding": {
"color": {"field": "color"},
"theta": {"aggregate": "sum", "field": "sales"}
}
}
],
"resolve": {"scale": {"color": "independent"}}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.