Altair：如何在分层图中对齐轴？

Question

我正在尝试创建二进制网格图和简单线图的叠加图。但是，在创建分层图时，轴未对齐，并且图变得不可读。理想情况下，我希望两个图共享一个轴，以便线坐标与地图坐标匹配。

这是我尝试的基本片段：

import torch as th
import altair as alt
import pandas as pd

xv, yv = th.meshgrid(th.linspace(-10, 10, 100), th.linspace(-10, 10, 100))
o_map = th.zeros_like(xv)
o_map[40:60, 40:60] = 1  # add obstacle centred on origin
map_df = pd.DataFrame(
    {"x": xv.flatten(), "y": yv.flatten(), "z": o_map.flatten()}
)
map_chart = (
    alt.Chart(map_df)
    .mark_rect()
    .encode(
        x=alt.X("x:O", axis=alt.Axis(format=".2")),
        y=alt.Y("y:O", axis=alt.Axis(format=".2")),
        color="z:N",
    )
    .properties(width=500, height=500)
)

x = th.linspace(-5, 10, 100)
line_df = pd.DataFrame({"x": x, "y": 0.2 * x ** 2 - 3})
line_chart = alt.Chart(line_df).mark_line(color="red").encode(x="x:Q", y="y:Q")

layer_chart = map_chart + line_chart

结果图如下：

Line plot

Binary map

Layered plot

Answer 1

如果将map_chart中的x和y通道数据类型从'O'更改为'Q'，则轴应自动对齐。

...
map_chart = (
    alt.Chart(map_df)
    .mark_rect()
    .encode(
        x=alt.X("x:Q"),
        y=alt.Y("y:Q"),
        color="z:N",
    )
    .properties(width=500, height=500)
)
...

• 更新：使用mark_square代替mark_rect

当标记为quantitative时，rect数据类型似乎不能很好地发挥作用（例如，如果您更改了type x和y到quantitative，热图看起来不正确，请参见下文）。 here

因此，如果rect不是必备标记，我建议您选择square。只要您的网格足够密集且标记大小足够大，标记之间就不会留有空白，这实际上就是您想要的。