Vega-Lite：在选择中添加"All"选项，该选项不会过滤图表

Question

我正在尝试实现一个下拉选择，如果用户选择"；所有"；它根本不会过滤和显示所有数据。到目前为止，我已经添加了选择选项和标签。

这是我的代码(为了可见性而简化(

{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"config": {
"bar": {
"height": 30,
"tooltip":true
}
},
"width": 1000,
"height": 600,
"background":"#dddddd",
"title":"Top 10 Richest by Industry",
"data": {
"url": "https://raw.githubusercontent.com/edenfrey/FIT3179_Visualisation2_Globe500/main/data/Billionaires_October_13_2022.csv"
},
"params": [
{
"name": "industry_sel",
"value": "Technology",
"bind": {
"input": "select",
"options": [
null,
"Technology",
"Industrial",
"Diversified",
"Finance",
"Consumer",
"Retail",
"Food & Beverage",
"Energy",
"Real Estate",
"Health Care",
"Commodities",
"Media & Telecom",
"Entertainment",
"Services"
],
"labels": [
"All",
"Technology",
"Industrial",
"Diversified",
"Finance",
"Consumer",
"Retail",
"Food & Beverage",
"Energy",
"Real Estate",
"Health Care",
"Commodities",
"Media & Telecom",
"Entertainment",
"Services"],
"name": "Industry: "
}
}
],
"layer": [
{
"mark": "bar"
}
],
"encoding": {
"y": {"field": "Name", "type": "nominal","sort": {"op": "sum", "field": "Net Worth", "order":"descending"}},
"x": {"field": "Net Worth", "type": "quantitative", "title": "Net Worth in Billions"}
},
"transform": [
{
"filter": {"field": "Industry", "equal": {"expr": "industry_sel"}}
}
]
}

到目前为止，当用户选择"；所有"；它只会显示任何内容(因为没有以null为值的Industry。此外，我希望只添加和更改此代码中的内容，而不是添加其他文件或黑客(这是一项任务。标准相当严格(

Answer 1

使用三元运算符并确保将null括在引号中。

{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"config": {
"bar": {
"height": 30,
"tooltip":true
}
},
"width": 1000,
"height": 600,
"background":"#dddddd",
"title":"Top 10 Richest by Industry",
"data": {
"url": "https://raw.githubusercontent.com/edenfrey/FIT3179_Visualisation2_Globe500/main/data/Billionaires_October_13_2022.csv"
},
"params": [
{
"name": "industry_sel",
"value": "Technology",
"bind": {
"input": "select",
"options": [
"null",
"Technology",
"Industrial",
"Diversified",
"Finance",
"Consumer",
"Retail",
"Food & Beverage",
"Energy",
"Real Estate",
"Health Care",
"Commodities",
"Media & Telecom",
"Entertainment",
"Services"
],
"labels": [
"All",
"Technology",
"Industrial",
"Diversified",
"Finance",
"Consumer",
"Retail",
"Food & Beverage",
"Energy",
"Real Estate",
"Health Care",
"Commodities",
"Media & Telecom",
"Entertainment",
"Services"],
"name": "Industry: "
}
}
],
"layer": [
{
"mark": "bar"
}
],
"encoding": {
"y": {"field": "Name", "type": "nominal","sort": {"op": "sum", "field": "Net Worth", "order":"descending"}},
"x": {"field": "Net Worth", "type": "quantitative", "title": "Net Worth in Billions"}
},
"transform": [
{
"filter":  "industry_sel=='null'?industry_sel:datum.Industry == industry_sel"
}
]
}

Answer 2

在查看了David的解决方案并发现在选择特定行业并返回"；所有"；不会变回来，我已经想出了一个类似于大卫的解决方案。

代码如下：

{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"config": {
"bar": {
"height": 30,
"tooltip":true
}
},
"width": 1000,
"height": 600,
"background":"#dddddd",
"title":"Top 10 Richest by Industry",
"data": {
"url": "https://raw.githubusercontent.com/edenfrey/FIT3179_Visualisation2_Globe500/main/data/Billionaires_October_13_2022.csv"
},
"params": [
{
"name": "industry_sel",
"value": "Technology",
"bind": {
"input": "select",
"options": [
"null",
"Technology",
"Industrial",
"Diversified",
"Finance",
"Consumer",
"Retail",
"Food & Beverage",
"Energy",
"Real Estate",
"Health Care",
"Commodities",
"Media & Telecom",
"Entertainment",
"Services"
],
"labels": [
"All",
"Technology",
"Industrial",
"Diversified",
"Finance",
"Consumer",
"Retail",
"Food & Beverage",
"Energy",
"Real Estate",
"Health Care",
"Commodities",
"Media & Telecom",
"Entertainment",
"Services"],
"name": "Industry: "
}
}
],
"layer": [
{
"mark": "bar"
}
],
"encoding": {
"y": {"field": "Name", "type": "nominal","sort": {"op": "sum", "field": "Net Worth", "order":"descending"}},
"x": {"field": "Net Worth", "type": "quantitative", "title": "Net Worth in Billions"}
},
"transform": [
{
"window": [{"op": "rank", "as" : "rank"}]
},
{
"filter": "industry_sel=='null'?datum.rank <= 10:datum.Industry == industry_sel"
}
]
}

根据我对其工作原理的理解，无论行业选择如何，它都将显示(排序的(数据的前10名。这个代码现在可以工作了。对于完整的代码和上下文，你可以在这里查看：

https://raw.githubusercontent.com/edenfrey/FIT3179_Visualisation2_Globe500/main/js/Top_10_Billionaires.vg.json