英文:
Conditionally define color channel on multi-line graph
问题
我有一张图,有两条线,我想要有一个param
来切换,将这两条线合并成一条。
Vega-lite允许你使用条件来编码字段,但我似乎无法在条件不满足时“定义为无”。我可以给一个value: red
,但这只是将两条线都设置为相同的颜色,或者value: false/null
会完全移除这两条线。
条件文档将“else”字段描述为可选项,但如果没有value
或field
,我从未看到两条线 -- 这似乎是通道从未定义。
例如,我有这个图:
当我切换“combine”复选框时,我希望获得这个效果(与简单未定义“color”通道相同):
但实际上我得到了这个:
在 https://vega.github.io/editor/ 上使用的示例规范:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"y": -1, "x": 1, "name": "north"},
{"y": 2, "x": 2, "name": "north"},
{"y": 0, "x": 3, "name": "north"},
{"y": -3, "x": 1, "name": "south"},
{"y": 1, "x": 2, "name": "south"},
{"y": 4, "x": 3, "name": "south"}
]
},
"encoding": {
"color": {
"condition": {"param": "combine", "field": "name"},
"value": "red",
},
"x": {"field": "x", "type": "quantitative"},
"y": {
"aggregate": "median",
"field": "y",
"scale": {"domain": [-10, 10]},
"type": "quantitative"
}
},
"height": "container",
"layer": [{"mark": {"interpolate": "basis", "type": "line"}}],
"params": [
{
"bind": {"input": "checkbox"},
"name": "combine",
"value": "Yes"
}
],
"width": 300
}
英文:
I have a graph with two lines, I want the option to toggle a param
to combine the two lines into one.
Vega-lite allows you to encode a field with a condition, but I can't seem to "define nothing" if the condition fails. I can give a value: red
but that just sets both lines to the same color, or value: false/null
which removes the lines entirely.
The condition docs describe the "else" fields as optional, but without any value
or field
I never see two lines -- which seems like the channel is never defined.
Eg, I have this graph:
And when I toggle the "combine" checkbox, I would like to get this (the same effect as simply not defining a 'color' channel):
Instead I get this:
Example spec for use on https://vega.github.io/editor/
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"y": -1, "x": 1, "name": "north"},
{"y": 2, "x": 2, "name": "north"},
{"y": 0, "x": 3, "name": "north"},
{"y": -3, "x": 1, "name": "south"},
{"y": 1, "x": 2, "name": "south"},
{"y": 4, "x": 3, "name": "south"}
]
},
"encoding": {
"color": {
"condition": {"param": "combine", "field": "name"},
"value": "red",
},
"x": {"field": "x", "type": "quantitative"},
"y": {
"aggregate": "median",
"field": "y",
"scale": {"domain": [-10, 10]},
"type": "quantitative"
}
},
"height": "container",
"layer": [{"mark": {"interpolate": "basis", "type": "line"}}],
"params": [
{
"bind": {"input": "checkbox"},
"name": "combine",
"value": "Yes"
}
],
"width": 300
}
答案1
得分: 1
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"y": -1, "x": 1, "name": "north"},
{"y": 2, "x": 2, "name": "north"},
{"y": 0, "x": 3, "name": "north"},
{"y": -3, "x": 1, "name": "south"},
{"y": 1, "x": 2, "name": "south"},
{"y": 4, "x": 3, "name": "south"}
]
},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {
"aggregate": "median",
"field": "y",
"scale": {"domain": [-10, 10]},
"type": "quantitative"
}
},
"height": "container",
"layer": [
{
"transform": [{"filter": "combine?true:false"}],
"mark": {"interpolate": "basis", "type": "line"},
"encoding": {"color": {"field": "name"}}
},
{
"transform": [{"filter": "combine?false:true"}],
"mark": {
"interpolate": "basis",
"type": "line",
"color": "red"
}
}
],
"params": [{"bind": {"input": "checkbox"}, "name": "combine", "value": true}],
"width": 300
}
英文:
Best I can do.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"y": -1, "x": 1, "name": "north"},
{"y": 2, "x": 2, "name": "north"},
{"y": 0, "x": 3, "name": "north"},
{"y": -3, "x": 1, "name": "south"},
{"y": 1, "x": 2, "name": "south"},
{"y": 4, "x": 3, "name": "south"}
]
},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {
"aggregate": "median",
"field": "y",
"scale": {"domain": [-10, 10]},
"type": "quantitative"
}
},
"height": "container",
"layer": [
{
"transform": [{"filter": "combine?true:false"}],
"mark": {"interpolate": "basis", "type": "line"},
"encoding": {"color": {"field": "name"}}
},
{
"transform": [{"filter": "combine?false:true"}],
"mark": {
"interpolate": "basis",
"type": "line",
"color": "red"
}
}
],
"params": [{"bind": {"input": "checkbox"}, "name": "combine", "value": true}],
"width": 300
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论