Vega-lite:使用带选择层的文本注释

Question

我是Vega-Lite的初学者，我试图使用选择和折叠的列名创建一个下拉菜单。我试图使用图层添加注释，但我似乎无法管理它与下拉菜单一起工作。它只在图表中间显示一个文本值。任何帮助都将非常感激。下面是我的代码:

{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"width": 600,
"height": 300,
"padding": 5,
"autosize": {"type": "fit", "resize": true, "contains": "padding"},  "data": {
"values": [
{
"country" : "Egypt",
"Rating" : 9.0,
"taken_on" : "2021-06-09 10:00:57",
"dv_survey" : "General Application Xperience Survey",
"department_displayvalue" : "Coffee"
},
{
"country" : "Japan",
"Rating" : 8.0,
"taken_on" : "2021-06-09 10:00:57",
"dv_survey" : "General Application Xperience Survey",
"department_displayvalue" : "Digital"
},
{
"country" : "Greece",
"Rating" : 4.0,
"taken_on" : "2021-06-09 10:00:57",
"dv_survey" : "Business Application Xperience Survey",
"department_displayvalue" : "Medicine"
},
{
"country" : "France",
"Rating" : 8.0,
"taken_on" : "2021-06-09 10:00:57",
"dv_survey" : "Business Application Xperience Survey",
"department_displayvalue" : "Cups"
},
{
"country" : "Japan",
"Rating" : 7.0,
"taken_on" : "2021-06-09 10:00:57",
"dv_survey" : "Business Application Xperience Survey",
"department_displayvalue" : "JAPAN"
},
{
"country" : "Japan",
"Rating" : 10.0,
"taken_on" : "2021-06-09 10:00:57",
"dv_survey" : "Business Application Xperience Survey",
"department_displayvalue" : "Pc"
},
{
"country" : "Japan",
"Rating" : 8.0,
"taken_on" : "2021-06-09 10:00:57",
"dv_survey" : "Business Application Xperience Survey",
"department_displayvalue" : "Books"
},
{
"country" : "Denmark",
"Rating" : 3.0,
"taken_on" : "2021-06-09 10:00:57",
"dv_survey" : "Business Application Xperience Survey",
"department_displayvalue" : "Kalem"
},
{
"country" : "Netherlands",
"Rating" : 6.0,
"taken_on" : "2021-06-09 10:00:57",
"dv_survey" : "General Application Xperience Survey",
"department_displayvalue" : "HR"
},
{
"country" : "Turkiye",
"Rating" : 5.0,
"taken_on" : "2021-06-09 10:00:57",
"dv_survey" : "Business Application Xperience Survey",
"department_displayvalue" : "TURKEY"
}
]
},
"transform": [
{"filter": {"field": "dv_survey", "equal": "Business Application Xperience Survey"}},
{"calculate": "datum.department_displayvalue", "as": "department"},
{
"fold": ["department", "country"],
"as": ["Choice", "val"]
},
{"filter": {"selection": "kpi"}}
],
"layer": [
{
"selection": {
"kpi": {
"type": "single",
"init": {"Choice": "country"},
"bind": {
"Choice": {
"name": "Ratings Per",
"input": "select",
"options": [
"department",
"country"
]
}
}
}
},
"mark": {"type": "bar", "point": true, "color": "#FFC94E", "height": 15},
"encoding": {
"tooltip": {
"field": "Rating",
"aggregate": "average",
"type": "quantitative",
"title": "Rating",
"format": ".1f"
},
"x": {
"field": "Rating",
"type": "quantitative",
"aggregate": "average",
"axis": null
},
"y": {
"field": "val",
"type": "nominal",
"axis": {"labelSeparation": 1, "labelPadding": 4, "title": null}
}
}
},
{
"mark": {"type": "text","align": "left","baseline": "middle"},
"encoding": {"text": {"field": "Rating", "type": "quantitative"},"tooltip": {
"field": "Rating",
"aggregate": "average",
"type": "quantitative",
"title": "Rating",
"format": ".1f"
}}
}
]
}

它看起来像什么

我在编辑器中的代码

Answer 1

随着理解的发展，你想在条形图旁边显示文本，但目前你在中心得到一个文本，如果你注意到它正在重叠或相互叠加。在文本层中没有提供x或y轴。我使用条形图层在层外创建了一个通用的x和y编码，并在文本中添加了聚合。下面是配置或引用编辑器:

{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"width": 600,
"height": 300,
"padding": 5,
"autosize": {"type": "fit", "resize": true, "contains": "padding"},
"data": {
"values": [
{
"country": "Egypt",
"Rating": 9,
"taken_on": "2021-06-09 10:00:57",
"dv_survey": "General Application Xperience Survey",
"department_displayvalue": "Coffee"
},
{
"country": "Japan",
"Rating": 8,
"taken_on": "2021-06-09 10:00:57",
"dv_survey": "General Application Xperience Survey",
"department_displayvalue": "Digital"
},
{
"country": "Greece",
"Rating": 4,
"taken_on": "2021-06-09 10:00:57",
"dv_survey": "Business Application Xperience Survey",
"department_displayvalue": "Medicine"
},
{
"country": "France",
"Rating": 8,
"taken_on": "2021-06-09 10:00:57",
"dv_survey": "Business Application Xperience Survey",
"department_displayvalue": "Cups"
},
{
"country": "Japan",
"Rating": 7,
"taken_on": "2021-06-09 10:00:57",
"dv_survey": "Business Application Xperience Survey",
"department_displayvalue": "JAPAN"
},
{
"country": "Japan",
"Rating": 10,
"taken_on": "2021-06-09 10:00:57",
"dv_survey": "Business Application Xperience Survey",
"department_displayvalue": "Pc"
},
{
"country": "Japan",
"Rating": 8,
"taken_on": "2021-06-09 10:00:57",
"dv_survey": "Business Application Xperience Survey",
"department_displayvalue": "Books"
},
{
"country": "Denmark",
"Rating": 3,
"taken_on": "2021-06-09 10:00:57",
"dv_survey": "Business Application Xperience Survey",
"department_displayvalue": "Kalem"
},
{
"country": "Netherlands",
"Rating": 6,
"taken_on": "2021-06-09 10:00:57",
"dv_survey": "General Application Xperience Survey",
"department_displayvalue": "HR"
},
{
"country": "Turkiye",
"Rating": 5,
"taken_on": "2021-06-09 10:00:57",
"dv_survey": "Business Application Xperience Survey",
"department_displayvalue": "TURKEY"
}
]
},
"transform": [
{
"filter": {
"field": "dv_survey",
"equal": "Business Application Xperience Survey"
}
},
{"calculate": "datum.department_displayvalue", "as": "department"},
{"fold": ["department", "country"], "as": ["Choice", "val"]},
{"filter": {"selection": "kpi"}}
],
"encoding": {
"x": {
"field": "Rating",
"type": "quantitative",
"aggregate": "average",
"axis": null
},
"y": {
"field": "val",
"type": "nominal",
"axis": {"labelSeparation": 1, "labelPadding": 4, "title": null}
}
},
"layer": [
{
"selection": {
"kpi": {
"type": "single",
"init": {"Choice": "country"},
"bind": {
"Choice": {
"name": "Ratings Per",
"input": "select",
"options": ["department", "country"]
}
}
}
},
"mark": {"type": "bar", "point": true, "color": "#FFC94E", "height": 15},
"encoding": {
"tooltip": {
"field": "Rating",
"aggregate": "average",
"type": "quantitative",
"title": "Rating",
"format": ".1f"
}
}
},
{
"mark": {"type": "text", "align": "left", "baseline": "middle"},
"encoding": {
"text": {
"field": "Rating",
"aggregate": "average",
"format": ".1f",
"type": "quantitative"
},
"tooltip": {
"field": "Rating",
"aggregate": "average",
"type": "quantitative",
"title": "Rating",
"format": ".1f"
}
}
}
]
}

让我知道这是否有效。