vega-lite - 如何在 vega-lite 中突出显示放大的栏并了解该栏的详细信息?
问题描述
当我在底部图表中选择范围时,我能够创建概览详细信息条形图并很好地放大。但是我很难在放大的图表中突出显示条形,并且也知道选择了哪些条形。
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"actions": false,
"data": {
"values": [
{ "created": 1595053277243 },
{ "created": 1595053277244 },
{ "created": 1595055277243 },
{ "created": 1594880606860 },
{ "created": 1594880604261 }
]
},
"vconcat": [{
"width": 1500,
"height": 300,
"selection": {
"highlight": {"type": "single", "empty": "none", "on": "mouseover"},
"select": {"type": "multi"}
},
"mark": {
"type": "bar",
"fill": "#4C78A8",
"stroke": "black",
"cursor": "pointer"
},
"encoding": {
"x": {
"field": "created",
"type": "temporal",
"scale": {"domain": {"selection": "brush"}},
"axis": {"title": ""},
"timeUnit": "utcyearmonthdatehoursminutes",
"update": {
"fillOpacity": {
"condition": {"selection": "select", "value": 1},
"value": 0.3
},
"strokeWidth": {
"condition": [
{
"test": {
"and": [
{"selection": "select"},
"length(data(\"select_store\"))"
]
},
"value": 2
},
{"selection": "highlight", "value": 1}
],
"value": 0
}
}
},
"y": {
"field": "created",
"type": "quantitative",
"aggregate": "count"
}
},
"config": {
"scale": {
"bandPaddingInner": 0.2
}
}
}, {
"width": 1500,
"height": 100,
"padding": 10,
"mark": "bar",
"selection": {
"brush": {"type": "interval", "encodings": ["x"]}
},
"encoding": {
"x": {
"field": "created",
"type": "temporal",
"timeUnit": "utcyearmonthdatehours"
},
"y": {
"field": "created",
"type": "quantitative",
"aggregate": "count"
}
}
}]
}
我试图将填充不透明度和笔画宽度放入编码中,但似乎不起作用。我还尝试在 vega-embed 中修补已编译的 vega 以收听 bar click 事件,但它不收听顶部(放大)图。
解决方案
Vega-Lite 编码没有update
属性。您可以直接在编码映射中指定特征:
"encoding": {
"x": {
"field": "created",
"type": "temporal",
"scale": {"domain": {"selection": "brush"}},
"axis": {"title": ""},
"timeUnit": "utcyearmonthdatehoursminutes"
},
"fillOpacity": {
"condition": {"selection": "select", "value": 1},
"value": 0.3
},
"strokeWidth": {
"condition": [
{
"test": {
"and": [
{"selection": "select"},
"length(data(\"select_store\"))"
]
},
"value": 2
},
{"selection": "highlight", "value": 1}
],
"value": 0
},
"y": {"field": "created", "type": "quantitative", "aggregate": "count"}
}
推荐阅读
- python - 安装模块的 pip 命令不起作用
- django - django shell - 一些查询集在 shell 中是空的,但它们不应该是
- python - 检查点击是否在 QTableWidget 内的单元格或可用空间上
- java - 如何查看 jOOQ 在编译时执行的 SQL 语句?
- android - 无法从绑定适配器绑定视图
- python - 输入形状上的 Tensorflow Keras ValueError
- mysql - MySQL:如何从列表中的每个人返回最后一条消息?
- java - 集群中的数据库并发问题
- module - 如何在模块中使用 matter.js
- javascript - 如何在 js 文件中使用插件的 globalProperties?