Altair - 将 y 轴与不同图表的 x 轴链接答案

【问题标题】：Altair - link y-axis with x-axis of a different chartAltair - 将 y 轴与不同图表的 x 轴链接
【发布时间】：2020-10-30 12:58:43
【问题描述】：

我需要直观地比较两个信号，我正在使用 Altair 绘制一些交互式图表，如下例所示。

import altair as alt
import pandas as pd
import numpy as np

np.random.seed(42)

df_comparison = pd.DataFrame({'x1': np.arange(20), 'x2': np.arange(20)}) #just for example purposes, actual data will be more interesting
df_signal_1 = pd.DataFrame({'x1': np.arange(20), 'data_1': np.random.random(20)})
df_signal_2 = pd.DataFrame({'x2': np.arange(20), 'data_2': np.random.random(20)})

comparison = alt.Chart(df_comparison, title='Comparison').mark_point(filled=True).encode(
    alt.X('x1'),
    alt.Y('x2')
).interactive()

signal_1 = alt.Chart(df_signal_1,title='Signal 1').mark_line().encode(
    alt.X('x1'),
    alt.Y('data_1'),
)

signal_2 = alt.Chart(df_signal_2, title='Signal 2').mark_line().encode(
    alt.X('x2'),
    alt.Y('data_2'),
)

(signal_1 & (comparison | signal_2).resolve_scale(x='shared')).resolve_scale(x='shared')

通过放大比较图表，您可以看到它的“x1”轴链接到信号 1 的“x1”轴，这很好。但是，它也链接到信号 2 的“x2”轴，这并不好。如何链接比较图表和信号 2 图表的“x2”轴而不破坏“x1”轴之间的链接？

【问题讨论】：

标签： python charts altair

【解决方案1】：

您可以通过手动创建交互，然后将域链接到选择的编码来做到这一点；像这样：

x12_zoom = alt.selection_interval(encodings=['x', 'y'], bind='scales')

comparison = alt.Chart(df_comparison, title='Comparison').mark_point(filled=True).encode(
    alt.X('x1'),
    alt.Y('x2'),
).add_selection(x12_zoom)

signal_1 = alt.Chart(df_signal_1,title='Signal 1').mark_line().encode(
    alt.X('x1', scale=alt.Scale(domain={'selection': x12_zoom.name, 'encoding': 'x'})),
    alt.Y('data_1'),
)

signal_2 = alt.Chart(df_signal_2, title='Signal 2').mark_line().encode(
    alt.X('x2', scale=alt.Scale(domain={'selection': x12_zoom.name, 'encoding': 'y'})),
    alt.Y('data_2'),
)

(signal_1 & (comparison | signal_2))

【讨论】：