Altair 折线图中的工具提示

Question

为折线图指定工具提示时，工具提示仅在沿线悬停在点上时出现，而不会在沿线悬停在任何其他位置时出现。这在使用非线性插值时尤其成问题......有没有办法在线条本身上显式设置工具提示？import altair as altfrom vega_datasets import datasource = data.jobs.urlalt.Chart(source).mark_line(interpolate="basis").encode(    alt.X('year:O'),    alt.Y('perc:Q', axis=alt.Axis(format='%')),    color='sex:N',    tooltip='sex:N').properties(    title='Percent of work-force working as Welders').transform_filter(    alt.datum.job == 'Welder')

Answer 1

从@Philipp_Kats 的回答和@dominik 的评论（以及偶然发现此线程并希望查看 Altair 代码示例的其他任何人）扩展，当前实现“工具提示”效果的方法是：

1. 创建线 ( mark_line())

2. 创建一个选择最近的点并根据 x 值进行选择的选择

3. 跨行捕捉一些透明选择器，通知跨行不同位置的 x 值

4. mark_text()上面 1 - 3层的 ( )层

一个真实的例子是我制作的一个简单 Flask 应用程序上的折线图。唯一的区别是我没有将选择器设置为透明 ( opacity=alt.value(0))，否则它是一个折线图，上面有工具提示。

这是一个使用 OP 原始数据集的可重现示例：

# Step 1: create the line

line = alt.Chart().mark_line(interpolate="basis").encode(

    x=alt.X("year:O"),

    y=alt.Y("perc:Q", axis=alt.Axis(format='%')),

    color='sex:N'

).transform_filter(

    alt.datum.job == 'Welder'

)

# Step 2: Selection that chooses nearest point based on value on x-axis

nearest = alt.selection(type='single', nearest=True, on='mouseover',

                            fields=['year'])

# Step 3: Transparent selectors across the chart. This is what tells us

# the x-value of the cursor

selectors = alt.Chart().mark_point().encode(

    x="year:O",

    opacity=alt.value(0),

).add_selection(

    nearest

)

# Step 4: Add text, show values in Sex column when it's the nearest point to 

# mouseover, else show blank

text = line.mark_text(align='left', dx=3, dy=-3).encode(

    text=alt.condition(nearest, 'sex:N', alt.value(' '))

)

# Layer them all together

chart = alt.layer(line, selectors, text, data=source, width=300)

chart

结果图：

Answer 2

我怀疑目前是否有直接的技术解决方案:-(

一种解决方法是在线条顶部显式添加点，以便更容易悬停。我通常使它们相对较大，但是直到悬停事件发生时才隐藏，就像这里作为顶部的樱桃，可以使用 Voronoi 显示任何给定点的最近点，就像他们在本教程中所做的那样

如果您需要 Altair 代码示例，请告诉我，我使用的是原始 vega，但实现 Altair 版本应该相对简单