vega-lite 线图 - 颜色未应用于变换过滤器
vega-lite line plot - color not getting applied in transform filter
Vega 编辑器 link here
我在多折线图中根据过滤条件更改了叠加层颜色。可以使用单行 但 'red' 覆盖线(连同红点)不会出现上面的多行示例。谁能帮帮我?
简答:您的图表可以正常工作,只是过滤后的值未显示为红色。
核心问题是编码总是取代标记属性,如您在这个更简单的示例中所见:editor link
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"description": "A scatterplot showing horsepower and miles per gallons.",
"data": {"url": "data/cars.json"},
"mark": {"type": "point", "color": "red"},
"encoding": {
"x": {"field": "Horsepower", "type": "quantitative"},
"y": {"field": "Miles_per_Gallon", "type": "quantitative"},
"color": {"field": "Origin", "type": "nominal"},
"shape": {"field": "Origin", "type": "nominal"}
}
}
请注意,尽管我们指定标记应为红色,但这会被颜色编码覆盖。这是 Vega-Lite 中的设计,因为编码比属性更具体。
返回您的图表:因为您在父图表中指定了颜色编码,所以每个单独的层都继承了该颜色编码,并且这些颜色覆盖了您在单独层中指定的 "color": "red"
。
为了让它做你想做的事,你可以将颜色编码移动到单独的图层中(并使用 detail
编码来确保数据仍然按该字段分组)。例如 (editor link):
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"data": {...},
"width": 1000,
"height": 200,
"autosize": {"type": "pad", "resize": true},
"transform": [
{
"window": [{"op": "rank", "as": "rank"}],
"sort": [{"field": "dateTime", "order": "descending"}]
},
{"filter": "datum.rank <= 100"}
],
"layer": [
{
"mark": {"type": "line"},
"encoding": {
"color": {
"field": "name",
"type": "nominal",
"legend": {"title": "Type"}
}
}
},
{
"mark": {"type": "line", "color": "red"},
"transform": [
{
"as": "count",
"calculate": "if(datum.anomaly == true, datum.count, null)"
},
{"calculate": "true", "as": "baseline"}
]
},
{
"mark": {"type": "circle", "color": "red"},
"transform": [
{"filter": "datum.anomaly == true"},
{"calculate": "true", "as": "baseline"}
]
}
],
"encoding": {
"x": {
"field": "dateTime",
"type": "temporal",
"timeUnit": "hoursminutesseconds",
"sort": {"field": "dateTime", "op": "count", "order": "descending"},
"axis": {"title": "Time", "grid": false}
},
"y": {
"field": "count",
"type": "quantitative",
"axis": {"title": "Count", "grid": false}
},
"detail": {"field": "name", "type": "nominal"}
}
}
Vega 编辑器 link here
我在多折线图中根据过滤条件更改了叠加层颜色。可以使用单行
简答:您的图表可以正常工作,只是过滤后的值未显示为红色。
核心问题是编码总是取代标记属性,如您在这个更简单的示例中所见:editor link
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"description": "A scatterplot showing horsepower and miles per gallons.",
"data": {"url": "data/cars.json"},
"mark": {"type": "point", "color": "red"},
"encoding": {
"x": {"field": "Horsepower", "type": "quantitative"},
"y": {"field": "Miles_per_Gallon", "type": "quantitative"},
"color": {"field": "Origin", "type": "nominal"},
"shape": {"field": "Origin", "type": "nominal"}
}
}
请注意,尽管我们指定标记应为红色,但这会被颜色编码覆盖。这是 Vega-Lite 中的设计,因为编码比属性更具体。
返回您的图表:因为您在父图表中指定了颜色编码,所以每个单独的层都继承了该颜色编码,并且这些颜色覆盖了您在单独层中指定的 "color": "red"
。
为了让它做你想做的事,你可以将颜色编码移动到单独的图层中(并使用 detail
编码来确保数据仍然按该字段分组)。例如 (editor link):
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"data": {...},
"width": 1000,
"height": 200,
"autosize": {"type": "pad", "resize": true},
"transform": [
{
"window": [{"op": "rank", "as": "rank"}],
"sort": [{"field": "dateTime", "order": "descending"}]
},
{"filter": "datum.rank <= 100"}
],
"layer": [
{
"mark": {"type": "line"},
"encoding": {
"color": {
"field": "name",
"type": "nominal",
"legend": {"title": "Type"}
}
}
},
{
"mark": {"type": "line", "color": "red"},
"transform": [
{
"as": "count",
"calculate": "if(datum.anomaly == true, datum.count, null)"
},
{"calculate": "true", "as": "baseline"}
]
},
{
"mark": {"type": "circle", "color": "red"},
"transform": [
{"filter": "datum.anomaly == true"},
{"calculate": "true", "as": "baseline"}
]
}
],
"encoding": {
"x": {
"field": "dateTime",
"type": "temporal",
"timeUnit": "hoursminutesseconds",
"sort": {"field": "dateTime", "op": "count", "order": "descending"},
"axis": {"title": "Time", "grid": false}
},
"y": {
"field": "count",
"type": "quantitative",
"axis": {"title": "Count", "grid": false}
},
"detail": {"field": "name", "type": "nominal"}
}
}