如何在Altair中使用MultiSelection结合映射关系选择关联元素——以点击高亮国家及邻国为例

Hey there! Let's get this interactive map working exactly how you want it. The trick is to use a single-click selection to capture the target country, then use Altair's expression functions to check if other countries are neighbors of that selection. Here's a complete, adjusted version of your code with explanations:

Full Working Code #

import altair as alt

# Load your TopoJSON dataset
countries = alt.topo_feature('countries-mod.json', 'countries')

# Create a single-click selection to grab the clicked country's ID
click_select = alt.selection_single(
    on='click',
    fields=['id'],
    empty='none',  # Retain selection when clicking empty space
    clear='dblclick'  # Let users double-click to reset the selection
)

# Build the interactive chart
chart = alt.Chart(countries).mark_geoshape(
    stroke='white'
).project(
    type='mercator',
    scale=325
).properties(
    title='Europe (Mercator): Click a Country to Highlight It + Its Neighbors',
    width=400,
    height=300
).configure_projection(
    center=[15, 55]
).encode(
    color=alt.condition(
        # First: Highlight the directly clicked country
        alt.datum.id == click_select.id,
        alt.value('crimson'),
        alt.condition(
            # Second: Highlight all neighbors of the clicked country
            alt.expr.indexof(alt.datum.neighbors, click_select.id) > -1,
            alt.value('orange'),
            alt.value('#666666')  # Default color for non-selected/non-neighbor countries
        )
    ),
    tooltip=[
        alt.Tooltip('id:N', title='Country ID'),
        # Uncomment below if your TopoJSON has country names (adjust field name if needed)
        # alt.Tooltip('properties.name:N', title='Country Name')
    ]
).add_selection(click_select)

chart.show()

Key Explanations #

• Why selection_single instead of multi? We only need to track one "source" country at a time to pull its neighbors. A single selection keeps the logic clean—clicking a new country will automatically update the highlighted set.
• Checking for neighbors: The alt.expr.indexof() function checks if the selected country's ID exists in the current country's neighbors array. If it returns a value greater than -1, the country is a neighbor.
• User experience touches: Added clear='dblclick' so users can reset the map by double-clicking, and kept empty='none' to preserve the selection when clicking outside a country.
• Tooltip enhancement: If your TopoJSON includes country names (most do, usually under properties.name), uncomment the second tooltip line to make the map more user-friendly.

Edge Case Note #

If your neighbors field is stored as a comma-separated string instead of an array (unlikely given your description, but possible), you can convert it to an array on the fly with alt.expr.split():

alt.expr.indexof(alt.expr.split(alt.datum.neighbors, ','), click_select.id) > -1

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