Altair图表报错：Javascript Error: Duplicate signal name: selector074_index

我来帮你搞定这个报错！你遇到的Javascript Error: Duplicate signal name: "selector074_index"是因为多个子图表重复添加了交互逻辑，导致生成的JavaScript信号重名冲突。具体来说，你给confirmed_area、confirmed_line都加了.interactive()，每个调用都会生成独立的交互信号，当把这些图表组合在一起时，就会出现重复的信号名。

修正方案 #

核心思路是：只在最终组合的图表上添加一次交互逻辑，并且确保选择器只被注册一次。同时可以优化数据源的使用，避免重复处理DataFrame。

修正后的代码如下：

# 先统一处理数据源，避免重复调用reset_index()
df_with_index = df.reset_index()

# 确认区域层：不需要加interactive()
confirmed_area = alt.Chart(df_with_index).mark_area(fillOpacity=0).encode(
    alt.X('index:T', title=" "),
    alt.Y('confirmed:Q', title=" "),
    tooltip=[
        alt.Tooltip('index:T', title="Fecha"),
        alt.Tooltip('confirmed:Q', title="Casos acumulados"),
        alt.Tooltip('confirmed_daily:Q', title="Nuevos Casos")
    ]
).properties(
    height=200,
    width=800
)

# 确认线层：同样不需要加interactive()
confirmed_line = alt.Chart(df_with_index).mark_line(size=3).encode(
    alt.X('index:T', title=" "),
    alt.Y('confirmed:Q', title=" ")
).properties(
    height=200,
    width=800
)

# 定义鼠标悬停选择器
nearest = alt.selection_single(
    nearest=True,
    on="mouseover",
    fields=["index:T"],
    empty="none"
)

# 点层：添加选择器，这里是唯一注册选择器的地方
point = alt.Chart(df_with_index).mark_point(color="black").encode(
    x="index:T",
    y="confirmed:Q",
    opacity=alt.condition(nearest, alt.value(1), alt.value(0))
).add_selection(nearest)

# 文本层：基于nearest选择器显示数值
text = confirmed_line.mark_text(align="left", dx=5, dy=-5).encode(
    text=alt.condition(nearest, "confirmed:Q", alt.value(" "))
)

# 组合所有图层，只在这里加一次interactive()
final_chart = confirmed_line + confirmed_area + point + text
final_chart = final_chart.interactive()

# 显示图表
final_chart

关键修改点说明 #

• 移除子图表的.interactive()：把交互逻辑统一放在最终组合后的图表上，避免生成重复的交互信号。
• 统一数据源：提前处理df.reset_index()并赋值给变量，减少重复计算，让代码更简洁。
• 确保选择器唯一注册：nearest选择器只通过point.add_selection(nearest)注册一次，其他图层通过引用这个选择器来实现交互，不会产生重复信号。

这样修改后，就不会再出现信号名重复的报错，同时能正常实现鼠标悬停显示文本的功能啦！

内容的提问来源于stack exchange，提问作者Jay Ballesteros C.