Vega 精简版图表轴标签问题

Question

我已将这个给定的示例图表(circle_custom_tick_labels)https://vega.github.io/editor/#/examples/vega-lite/circle_custom_tick_labels 用于Vega lite

{
"data": {
"values": [{"IMDB Rating":1}, 
{"IMDB Rating":3},
{"IMDB Rating":6},
{"IMDB Rating":72},
{"IMDB Rating":5},
{"IMDB Rating":144},
{"IMDB Rating":217},
{"IMDB Rating":7200},
{"IMDB Rating":7220},
{"IMDB Rating":14400},
{"IMDB Rating":14420},
{"IMDB Rating":21600},    
{"IMDB Rating":23698},
{"IMDB Rating":25599},
{"IMDB Rating":28800}
]
},
"mark": {"type": "tick"},
"encoding": {
"x": { 
"axis": {
"labelExpr": "datum.label == 0 ? 'A' : datum.label == 7200 ? 'B': datum.label == 14400 ? 'C': datum.label == 21600 ? 'D' : 'E'",
"labelFlush": false,       
"values": [0, 7200, 14400, 21600, 28800]
},
"field": "IMDB Rating",
"type": "quantitative",      
"scale": {"domain": [0, 28800]},
"title": null
},
"color": {        
"condition": [
{"test": "datum['IMDB Rating'] < 14400", "value": "green"},
{"test": "datum['IMDB Rating'] == 14400 ", "value": "red"},
{"test": "datum['IMDB Rating']  >14400 ", "value": "blue"}],
"value": "white"
}       
}

当我更改数据集并给出数千个大值时，以及轴标签的大值，例如

"axis": {
"labelExpr": "datum.label == 0 ? 'A' : datum.label == 7200 ? 'B': datum.label == 14400 ? 'C': datum.label == 21600 ? 'D' : 'E'",
"labelFlush": false,       
"values": [0, 7200, 14400, 21600, 28800]
}  

则 x 轴的标签无法正确显示。它应该像

0 -> A,
7200 -> B,
14400 -> C,
21600 -> D,
28800 -> E

但它显示像 在此处输入图像描述

对于较小的值，它可以正常工作，如下所示：

{   
"data": {
"values": [{"IMDB Rating":1}, 
{"IMDB Rating":1},
{"IMDB Rating":2},
{"IMDB Rating":3},
{"IMDB Rating":4},
{"IMDB Rating":5},
{"IMDB Rating":6},
{"IMDB Rating":7},
{"IMDB Rating":8},
{"IMDB Rating":3.2},
{"IMDB Rating":4.5}
]
},
"mark": {"type": "tick"},
"encoding": {
"x": { 
"axis": {
"labelExpr": "datum.label == 0 ? 'A' : datum.label == 2 ? 'B': datum.label == 4 ? 'C': datum.label == 6 ? 'D' : 'E'",
"labelFlush": false,       
"values": [0, 2, 4, 6, 8]
},
"field": "IMDB Rating",
"type": "quantitative",      
"scale": {"domain": [0, 10]},
"title": null
},
"color": {        
"condition": [
{"test": "datum['IMDB Rating'] < 5", "value": "green"},
{"test": "datum['IMDB Rating'] == 5 ", "value": "red"},
{"test": "datum['IMDB Rating']  >5 ", "value": "blue"}],
"value": "white"
}       

}
}   

在此处输入图像描述

Answer 1

您的labelExpr配置几乎是正确的，只是条件无法正常工作，因为您正在与似乎是字符串datum.label进行比较，因此如果您提供条件作为datum.label == '7,200'(注意：我在 7200 左右提供了单引号)，那么它将正确显示B轴上的标签。

但这不是更好的方法，因为您的数据输入值是数字格式，因此不应根据输出进行比较。相反，您可以将条件与label.value进行比较，datum.value == 7200无需更改值类型即可正常工作。

以下是代码片段或参考编辑器：

{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": "container",
"data": {
"values": [
{"IMDB Rating": 1},
{"IMDB Rating": 3},
{"IMDB Rating": 6},
{"IMDB Rating": 72},
{"IMDB Rating": 5},
{"IMDB Rating": 144},
{"IMDB Rating": 217},
{"IMDB Rating": 7200},
{"IMDB Rating": 7220},
{"IMDB Rating": 14400},
{"IMDB Rating": 14420},
{"IMDB Rating": 21600},
{"IMDB Rating": 23698},
{"IMDB Rating": 25599},
{"IMDB Rating": 28800}
]
},
"mark": {"type": "tick"},
"encoding": {
"x": {
"axis": {
"labelExpr": "datum.value == 0 ? 'A' : datum.value == 7200 ? 'B': datum.value == 14400 ? 'C': datum.value == 21600 ? 'D' : 'E'",
"labelFlush": false,
"formatType": "number",
"values": [0, 7200, 14400, 21600, 28800]
},
"field": "IMDB Rating",
"type": "quantitative",
"scale": {"domain": [0, 28800]},
"title": null
},
"color": {
"condition": [
{"test": "datum['IMDB Rating'] < 14400", "value": "green"},
{"test": "datum['IMDB Rating'] == 14400 ", "value": "red"},
{"test": "datum['IMDB Rating']  >14400 ", "value": "blue"}
],
"value": "white"
}
}
}