Vega lite-更改绑定输入的位置

Question

我正在寻找一种方法来更改绑定输入的位置。在所附的vega lite图表中，我有两个选择下拉列表，一个在另一个下面，它们显示在视图的底部。是否有任何可用的配置可以在下面显示2个下拉列表时并排显示，或者它们可以像图例一样显示在图表视图的右侧或左侧。

请参阅以下配置或编辑器：

{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A bar chart of flight statistics, aggregated by the selected time unit.",
"height": "container",
"width": "container",
"params": [
{
"name": "timeunit",
"value": ["day"],
"bind": {
"input": "select",
"options": [["year"], ["month"], ["date"], ["day"], ["hours"]]
}
},
{
"name": "measure",
"value": "delay",
"bind": {"input": "select", "options": ["count", "delay"]}
}
],
"data": {"url": "data/flights-20k.json"},
"transform": [
{
"calculate": "timeFormat(datetime(datum.date), timeUnitSpecifier([timeunit]))",
"as": "formattedDate"
}
],
"mark": "bar",
"encoding": {
"x": {"field": "formattedDate"},
"y": {"field": "delay", "type": "quantitative", "stack": false}
},
"config": {}
}

Answer 1

AFAIK使用vega lite规范无法指定绑定输入的位置。但是，您可以始终使用CSS。

vega-lite生成的HTML提供了各种样式选项。有一个父元素<div>，它包含图形元素(<svg>或<canvas>(，如果存在绑定输入，则有一个同级元素<form class="vega-bindings">。

为了并排放置两个输入，最低CSS可以是：

.vega-bindings {
display: flex;
}

为了达到更美观的效果，你需要做一些额外的造型。但这应该相对简单，这取决于你的CSS技能。

或者，如果你想把输入放在类似于图例的右侧，你可以从以下开始：

div#my-parent-element {
display: flex;
}

同样，根据所需的抛光程度和您的设计细节，还需要进一步的造型。