在 Altair 中的多行上显示选择框答案

【问题标题】：Show selection box over multiple rows in Altair在 Altair 中的多行上显示选择框
【发布时间】：2022-07-21 18:50:57
【问题描述】：

我想使用altair 创建一个跨越多行且具有交互性的绘图。通过将该区域外的颜色更改为灰色，突出显示绘图的子区域正确突出显示所有行中的该区域。这是我的 MWE 以及生成的交互式绘图的屏幕截图：

import altair as alt
from vega_datasets import data

source = data.stocks()

brush = alt.selection_interval(encodings=["x"], mark=alt.BrushConfig(fill="green"))

histogram = (
    alt.Chart(source)
    .mark_bar()
    .encode(
        x="date:T",
        y="price:Q",
        color=alt.condition(brush, "symbol:N", alt.value("gray"), legend=None),
    )
)
   
overlay = (
    alt.Chart(source)
    .mark_rect(opacity=0.8)
    .encode(
        x="date:T",
        y="proce:Q",
        color=alt.condition(brush, alt.value("green"), alt.value("gray"), legend=None),
    )
)
(histogram + overlay).properties(height=50, width=400).facet(
    row=alt.Row("symbol:N",)
).transform_filter(alt.datum.symbol != "GOOG").add_selection(brush)

我在第一行中选择了一个范围，并且只有该行具有我尝试添加到每一行的绿色背景（通过overlay）。显然我失败了。有没有办法让所有行都有绿色选择框，不管我从哪一行选择范围？

【问题讨论】：

标签： python data-visualization altair

【解决方案1】：

无法在多个图表https://github.com/vega/vega-lite/issues/3686、https://github.com/vega/vega-lite/issues/7030、vega-lite: synchron selection in multiple chart 上显示选择。

在您的方法的基础上，您可以执行以下操作（无法弄清楚如何删除叠加层中的条之间的spacing/padding，这可能是时间尺度或笔划的问题）：

import altair as alt
from vega_datasets import data

source = data.stocks()

brush = alt.selection_interval(encodings=["x"], mark=alt.BrushConfig(fill='w'), empty='none')

histogram = (
    alt.Chart(source)
    .mark_bar()
    .encode(
        x="date:T",
        y="price:Q",
        color=alt.condition(brush, "symbol:N", alt.value("gray"), legend=None),
    )
)
   
overlay = (
    alt.Chart(source)
    .mark_bar(color='green')
    .encode(
        x=alt.X('date:T', scale=alt.Scale(paddingInner=0)),
        y=alt.datum(250),
        opacity=alt.condition(brush, alt.value(0.1), alt.value(0), legend=None),
    )
)
(histogram + overlay).properties(height=50, width=400).facet(
    row=alt.Row("symbol:N",)
).transform_filter(alt.datum.symbol != "GOOG").add_selection(brush)

【讨论】：