如何通过 Altair 中的选择突出显示图形的边缘

问题描述

我正在使用 altair 选择图形的边。这个想法是选择一个或多个节点并绘制到达或离开该节点的所有边。我在 https://altair-viz.github.io/gallery/airport_connections.html 的机场连接示例之后模拟了下面的代码（最小工作示例）。然而，当我运行我的代码时，只有从所选节点发出的边被显示出来，而不是所有的边。我将如何修改我的代码来解决这个问题。感谢您提供的任何见解。戈登。

代码和文件可以在：https://drive.google.com/drive/folders/1rqQdrLAsATSqjWYCvf372SDVt5hTlC9s?usp=sharing

import pandas as pd
import altair as alt
import streamlit as st

def drawPlot(node_df,edge_df):

    node_brush = alt.selection_interval(empty='all')

    xscale = alt.Scale(domain=[0,127])
    yscale = alt.Scale(domain=[0.,410])

    lookup_data = alt.LookupData(
        node_df,key="id",fields=["x","y"]
    )

    nodes = alt.Chart(node_df).mark_rect(
        width=20,height=20,).encode(
        x = alt.X('x:Q',scale=xscale),y = 'y:Q',).add_selection(
        node_brush
    )

    edges = alt.Chart(edge_df).mark_rule(color='yellow',x2 = 'x2:Q',y2 = 'y2:Q',).transform_lookup(
        lookup='dst',from_=lookup_data
    ).transform_lookup(
        lookup='src',from_=lookup_data,as_=['x2','y2']
    ).transform_filter(
        node_brush
    )

    full_chart = (edges + nodes).properties(
        height=500,width=1000,)
#----------------------------------------------------------------
if __name__ == "__main__":
    node_df = pd.read_csv("node_df_MWE.csv")
    edge_df = pd.read_csv("edge_df_MWE.csv")
    chart = drawPlot(node_df,edge_df)
    st.altair_chart(chart,use_container_width=True)

解决方法

您可以在设置选择时指定 fields=['x2','y2']。但是，间隔选择此时仅支持主要的 x 和 y 编码，因此您还需要将选择类型更改为单个或多个，这确实使单击时有点难以点击，但它确实选择了源和边：node_brush = alt.selection_single(fields=['x2','y2'])。

也许对您来说最好的解决方法是创建第二个边图，在查找中将 x,y 与 x2,y2 交换：

import pandas as pd
import altair as alt


node_df = pd.read_csv("~/Downloads/node_df_MWE.csv")
edge_df = pd.read_csv("~/Downloads/edge_df_MWE.csv")

node_brush = alt.selection_interval()

xscale = alt.Scale(domain=[0,127])
yscale = alt.Scale(domain=[0.,500])

lookup_data = alt.LookupData(
    node_df,key="id",fields=["x","y"]
)

nodes = alt.Chart(node_df).mark_rect(
    width=20,height=20,).encode(
    x = alt.X('x:Q',scale=xscale),y = 'y:Q',).add_selection(
    node_brush
)

edges = alt.Chart(edge_df).mark_rule(color='red',y = alt.Y('y:Q',scale=yscale),x2 = 'x2:Q',y2 = 'y2:Q',).transform_lookup(
    lookup='src',from_=lookup_data
).transform_lookup(
    lookup='dst',from_=lookup_data,as_=['x2','y2']
).transform_filter(
    node_brush
)

edges2 = alt.Chart(edge_df).mark_rule(color='red',).transform_lookup(
    lookup='dst',from_=lookup_data
).transform_lookup(
    lookup='src','y2']
).transform_filter(
    node_brush
)

full_chart = (edges + edges2 + nodes).properties(
    height=500,width=1000,)
full_chart