Select altair 中的空栏

Question

是否可以 select 使用 altair 单击图表中的空条？

例如：

selection = alt.selection_single(fields=['x'])

ch1 = alt.Chart(ds2).mark_bar().encode(
x='y:Q',
y='x:O',
color=alt.condition(
    selection, 
    alt.value('#011B56'), 
    alt.value('lightgray'))

).add_selection(selection).properties(height=200)

在这里您可以看到，现在选择了第三个栏（从上面）。我希望能够选择第二个并在另一个图表中进一步进行其他计算。但是，如果我现在单击，将识别出我正在单击图表的免费 space。另一方面，这会触发 selection 的清除事件。

有没有办法select空栏？

谢谢！

Answer 1

我创建了一个 vega-lite 示例，即使没有可见的条形图，您也可以在 y 轴上 select。创建一个 x 轴覆盖整个比例尺的层，并使用 opacity: 0 使该层的条形图透明。由于第二层的不透明度不可见，您仍然可以在 y 轴的空 space 上执行 selections。下面是片段和 editor:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": "container",
  "height": 250,
  "data": {
    "values": [
      {"Origin": "USA", "value": 100},
      {"Origin": "Japan", "value": 0},
      {"Origin": "Europe", "value": 50},
      {"Origin": "India", "value": 100}
    ]
  },
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "y": {"field": "Origin"},
        "x": {"field": "value", "type": "quantitative"}
      }
    },
    {
      "params": [
        {
          "select": {"type": "point", "fields": ["Origin"]},
          "name": "mySelection"
        }
      ],
      "transform": [{"calculate": "1", "as": "barSel"}],
      "mark": {"type": "bar", "opacity": 0},
      "encoding": {
        "y": {"field": "Origin"},
        "x": {
          "field": "barSel",
          "type": "quantitative",
          "scale": {"domain": [0, 1]},
          "axis": null
        }
      }
    }
  ],
  "resolve": {"scale": {"x": "independent"}, "axis": {"x": "independent"}}
}

Select altair 中的空栏

Select empty bar in altair

altair

vega-lite

vega