[英]Vega-lite interactive legend and bar chart
I'm fairly new to vega-lite.我是 vega-lite 的新手。 I'd really like to get the following interactive bar chart working:
我真的很想让以下交互式条形图工作:
My strategy for building this is to have two layers, one layer for the bars, and one for the text.我构建它的策略是有两层,一层用于条形图,一层用于文本。 Then one selection that is in 'multi' mode on mousedown, and also bound to the legend.
然后在鼠标按下时处于“多”模式的一个选择,也绑定到图例。
My question is two-fold:我的问题有两个:
Here is my schema, thanks for any help in advance!这是我的架构,提前感谢您的帮助!
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple bar chart with embedded data.",
"title": "test",
"data": {
"values": [
["Lateral", 630.666127],
["Basal", 413.211154],
["Accessory", 257.842981],
["Anterior", 48.735523],
["Central", 45.797799],
["Medial", 30.314856],
["Cortical", 27.697457],
["Corticoamygdaloid", 169.707268],
["Paralaminar", 46.216784],
["Whole_amygdala", 1670.189948]
],
"name": "data"
},
"width": "600",
"height": "400",
"encoding": {
"x": {"field": "0", "type": "nominal", "sort": "-y"},
"y": {"field": "1", "type": "quantitative"}
},
"layer": [
{
"mark": "bar",
"encoding": {
"color": {
"field": "0"
},
"opacity": {
"condition": {"selection": "series", "value": 1},
"value": 0.2
}
},
"selection": {
"series": {"type": "multi", "bind": "legend"}
}
},
{
"transform": [{"filter": {"selection":"series"}}],
"mark": {"type": "text", "dy": -5},
"encoding": {"text": {"field": "1"}}
}
]
}
You were quite close.你很接近。 When you bind a selection to a legend, by default it deactivates other ways of interacting.
当您将选择绑定到图例时,默认情况下它会停用其他交互方式。 But as mentioned briefly in the Legend Binding docs, you can re-enable this by specifying the
"on"
attribute.但正如Legend Binding文档中简要提到的,您可以通过指定
"on"
属性来重新启用它。 Here is the result ( Open in editor ):这是结果( 在编辑器中打开):
{
"title": "test",
"data": {
"values": [
["Lateral", 630.666127],
["Basal", 413.211154],
["Accessory", 257.842981],
["Anterior", 48.735523],
["Central", 45.797799],
["Medial", 30.314856],
["Cortical", 27.697457],
["Corticoamygdaloid", 169.707268],
["Paralaminar", 46.216784],
["Whole_amygdala", 1670.189948]
],
"name": "data"
},
"width": "600",
"height": "400",
"encoding": {
"x": {"field": "0", "type": "nominal", "sort": "-y"},
"y": {"field": "1", "type": "quantitative"}
},
"layer": [
{
"mark": "bar",
"encoding": {
"color": {"field": "0"},
"opacity": {
"condition": {"selection": "series", "value": 1},
"value": 0.2
}
},
"selection": {
"series": {
"type": "multi",
"encodings": ["color"],
"on": "click",
"bind": "legend"
}
}
},
{
"transform": [{"filter": {"selection": "series"}}],
"mark": {"type": "text", "dy": -5},
"encoding": {"text": {"field": "1"}}
}
]
}
Regarding your second question: currently selections must be defined within the layers they are bound to, but this will likely change in future Vega-Lite versions;关于你的第二个问题:当前选择必须在它们绑定的层中定义,但这可能会在未来的 Vega-Lite 版本中改变; see https://github.com/vega/vega-lite/pull/6919 .
见https://github.com/vega/vega-lite/pull/6919 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.