Vega-lite:无法解析 hconcat 图上的双 y 轴
Vega-lite: Cannot resolve dual y-axis on hconcat graph
我目前有 2 个水平连接的图表,我可以在第一个图表上 select 变量,并在第二个图表上显示有关它们的更多信息。我正在尝试解析第二张图上的 y 轴,以便我有 2 个具有不同单位的 y 轴,并且已经弄清楚如何在左侧和右侧分离轴,但单位是相同的。这不是很有用,我想知道如何在两个 上都有独立的比例。从文档来看,似乎使用 resolve 函数应该可以解决问题,但它所做的只是将轴分开。
这是我的代码:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {
"url": "data/Per_Species_Per_Location/Fisher_location137.csv"
},
"spacing": 15,
"hconcat": [{"layer":
[{ "encoding": {
"color": {
"title": "Total (PPA)",
"field": "Total",
"type": "quantitative",
"scale": {"range": ["#FFCC66", "#09bc8a", "#023057"]}
},
"x": {
"field": "Variable",
"type": "nominal",
"axis": {"labelAngle": -45, "title": "Element",
"grid": false}
},
"y": {
"title": "Total (PPA)",
"field": "Total",
"type": "quantitative"
},
"fillOpacity": {
"condition": {"selection": "select", "value": 1},
"value": 0.25
},
"tooltip": [
{"field": "Variable", "type": "nominal"},
{"field": "Total", "type": "quantitative"},
]
},
"width": 750,
"height": 400,
"selection": {"select": {"encodings": ["x"], "type": "multi"}},
"mark": {"type": "bar", "cursor": "pointer"},
}]},
{"layer":[
{"width": 150,
"height": 400,
"mark": "bar",
"encoding": {
"color": {
"condition": {
"selection": "click",
"field": "Sex",
"type": "nominal",
"scale": {"range": ["#7a003c", "#FFCC66", "#5b6770"]}
},
"value": "lightgray"
},
"y": {"field": "Sex Value", "type": "quantitative", "aggregate": "mean", "axis": {"orient": "left"}},
"x": {"title": "Sex", "field": "Sex", "type": "nominal"},
"tooltip": [
{"field": "Sex", "type": "nominal"},
{"field": "Sex Value", "type": "quantitative", "aggregate": "mean"},
{"field": "Count", "type": "quantitative", "aggregate": "sum"}
]
},
"selection": {"click": {"encodings": ["color"], "type": "multi"}},
"transform": [{"filter": {"selection": "select"}}]},
{"mark": "rule",
"encoding":{
"y": {
"aggregate": "mean",
"field": "Reference",
"type": "quantitative",
"axis": {"orient": "right"}
},
"color": {"value": "black"},
"size": {"value": 3}
},
"transform": [{"filter": {"selection": "select"}}]}
]}], "resolve": {"scale": {"y": "independent"}}
}
这是图表当前的样子:
如您所见,性别值的平均值和参考值的平均值具有相同的轴刻度,我希望它们不同,以便可以轻松看到条形。
如有任何帮助,我们将不胜感激!
在层图中使用"resolve"
为双y轴设置独立刻度的方法。这是一个最小的例子,表明它在 hconcat (open in editor) 中工作:
{
"data": {
"values": [
{"Sex": "Female", "Sex Value": 3, "Reference": 42},
{"Sex": "Male", "Sex Value": 2, "Reference": 40},
{"Sex": "Unknown", "Sex Value": 1, "Reference": 45}
]
},
"hconcat": [
{
"mark": "point",
"encoding": {
"x": {"field": "Sex Value", "type": "quantitative"},
"y": {"field": "Reference", "type": "quantitative"}
}
},
{
"layer": [
{
"mark": "bar",
"encoding": {
"x": {"type": "nominal", "field": "Sex"},
"y": {
"type": "quantitative",
"aggregate": "mean",
"field": "Sex Value"
}
}
},
{
"mark": "rule",
"encoding": {
"y": {
"type": "quantitative",
"aggregate": "mean",
"field": "Reference"
}
}
}
],
"resolve": {"scale": {"y": "independent"}}
}
]
}
我认为它在您的情况下不起作用的原因是您将解决方案置于 hconcat
而不是将解决方案置于 layer
中。换句话说,而不是你的规范的最后一行是:
]}], "resolve": {"scale": {"y": "independent"}}
你应该使用:
], "resolve": {"scale": {"y": "independent"}}}]
我目前有 2 个水平连接的图表,我可以在第一个图表上 select 变量,并在第二个图表上显示有关它们的更多信息。我正在尝试解析第二张图上的 y 轴,以便我有 2 个具有不同单位的 y 轴,并且已经弄清楚如何在左侧和右侧分离轴,但单位是相同的。这不是很有用,我想知道如何在两个 上都有独立的比例。从文档来看,似乎使用 resolve 函数应该可以解决问题,但它所做的只是将轴分开。
这是我的代码:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {
"url": "data/Per_Species_Per_Location/Fisher_location137.csv"
},
"spacing": 15,
"hconcat": [{"layer":
[{ "encoding": {
"color": {
"title": "Total (PPA)",
"field": "Total",
"type": "quantitative",
"scale": {"range": ["#FFCC66", "#09bc8a", "#023057"]}
},
"x": {
"field": "Variable",
"type": "nominal",
"axis": {"labelAngle": -45, "title": "Element",
"grid": false}
},
"y": {
"title": "Total (PPA)",
"field": "Total",
"type": "quantitative"
},
"fillOpacity": {
"condition": {"selection": "select", "value": 1},
"value": 0.25
},
"tooltip": [
{"field": "Variable", "type": "nominal"},
{"field": "Total", "type": "quantitative"},
]
},
"width": 750,
"height": 400,
"selection": {"select": {"encodings": ["x"], "type": "multi"}},
"mark": {"type": "bar", "cursor": "pointer"},
}]},
{"layer":[
{"width": 150,
"height": 400,
"mark": "bar",
"encoding": {
"color": {
"condition": {
"selection": "click",
"field": "Sex",
"type": "nominal",
"scale": {"range": ["#7a003c", "#FFCC66", "#5b6770"]}
},
"value": "lightgray"
},
"y": {"field": "Sex Value", "type": "quantitative", "aggregate": "mean", "axis": {"orient": "left"}},
"x": {"title": "Sex", "field": "Sex", "type": "nominal"},
"tooltip": [
{"field": "Sex", "type": "nominal"},
{"field": "Sex Value", "type": "quantitative", "aggregate": "mean"},
{"field": "Count", "type": "quantitative", "aggregate": "sum"}
]
},
"selection": {"click": {"encodings": ["color"], "type": "multi"}},
"transform": [{"filter": {"selection": "select"}}]},
{"mark": "rule",
"encoding":{
"y": {
"aggregate": "mean",
"field": "Reference",
"type": "quantitative",
"axis": {"orient": "right"}
},
"color": {"value": "black"},
"size": {"value": 3}
},
"transform": [{"filter": {"selection": "select"}}]}
]}], "resolve": {"scale": {"y": "independent"}}
}
这是图表当前的样子:
如您所见,性别值的平均值和参考值的平均值具有相同的轴刻度,我希望它们不同,以便可以轻松看到条形。
如有任何帮助,我们将不胜感激!
在层图中使用"resolve"
为双y轴设置独立刻度的方法。这是一个最小的例子,表明它在 hconcat (open in editor) 中工作:
{
"data": {
"values": [
{"Sex": "Female", "Sex Value": 3, "Reference": 42},
{"Sex": "Male", "Sex Value": 2, "Reference": 40},
{"Sex": "Unknown", "Sex Value": 1, "Reference": 45}
]
},
"hconcat": [
{
"mark": "point",
"encoding": {
"x": {"field": "Sex Value", "type": "quantitative"},
"y": {"field": "Reference", "type": "quantitative"}
}
},
{
"layer": [
{
"mark": "bar",
"encoding": {
"x": {"type": "nominal", "field": "Sex"},
"y": {
"type": "quantitative",
"aggregate": "mean",
"field": "Sex Value"
}
}
},
{
"mark": "rule",
"encoding": {
"y": {
"type": "quantitative",
"aggregate": "mean",
"field": "Reference"
}
}
}
],
"resolve": {"scale": {"y": "independent"}}
}
]
}
我认为它在您的情况下不起作用的原因是您将解决方案置于 hconcat
而不是将解决方案置于 layer
中。换句话说,而不是你的规范的最后一行是:
]}], "resolve": {"scale": {"y": "independent"}}
你应该使用:
], "resolve": {"scale": {"y": "independent"}}}]