Altair中叠加散点图与热力图时如何避免热力图被遮挡变白？

问题原因 #

1. 你给散点图的x和y用了**序数型（O）**编码，但散点数据是连续的浮点数，这会让Altair生成一套独立的离散坐标轴，和热力图的坐标轴冲突，直接把热力图对应区域盖成白色了。
2. 图层顺序搞反了：现在你是先放散点图再放热力图，相当于热力图在散点下面，自然会被盖住，应该反过来让热力图当底层。

修改后的完整代码 #

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

# 生成散点数据
x = []
y = []
for i in range(5):
    x.append(r.uniform(-10,10))
    y.append(r.uniform(-10,10))
source1 = pd.DataFrame({
    'y' : y,
    'x' : x
})

# 散点图：改编码为连续型，对齐坐标轴范围
scatter1 = alt.Chart(source1).mark_point(size=100, color='white', stroke='black').encode(
    x=alt.X('x:Q', axis=alt.Axis(labels=False), scale=alt.Scale(domain=[-10, 10])),
    y=alt.Y('y:Q', axis=alt.Axis(labels=False), scale=alt.Scale(domain=[-10, 10])),
).properties(
    width=400,
    height=400,
)

# 生成热力图数据
X, Y = np.meshgrid(range(-10,10), range(-10,10))
Z = X**2 - Y**2 

source2 = pd.DataFrame({
    'X': X.ravel(),
    'Y': Y.ravel(),
    'Z': Z.ravel()
})

# 热力图
heatmap1 = alt.Chart(source2).mark_rect().encode(
    x='X:O',
    y='Y:O',
    color='Z:Q'
).properties(
    width=400,
    height=400
)

# 调整图层顺序：热力图放前面当底层，散点图叠在上面
alt.layer(heatmap1, scatter1)

核心修改说明 #

• 散点编码类型调整：把x:O、y:O换成x:Q、y:Q（连续型），因为你的散点是连续的浮点数，用序数型会生成错误的离散坐标轴，和热力图的轴打架。
• 坐标轴范围对齐：给散点图的x、y轴设置domain=[-10, 10]，确保和热力图的坐标范围完全匹配，避免出现轴偏移。
• 图层顺序调换：alt.layer(heatmap1, scatter1)让热力图作为底层，散点图在上方，这样散点只会落在热力图的矩形上，不会把热力图的区域弄白。
• 可选优化：给散点加了白色填充和黑色描边，让散点在热力图上更显眼，你可以根据自己的需求改颜色和大小。

内容的提问来源于stack exchange，提问作者Daisy Welham