Dash Cytoscape实现用户点击节点时动态修改节点颜色的方法咨询

核心通过Cytoscape组件的tapNodeData交互属性配合Dash回调实现，具体操作如下： #

步骤1：新增选中节点样式 #

在原有default_stylesheet列表中追加选中状态的类样式，指定红色背景：

default_stylesheet=[
    # 原有vNodes、mNodes样式保留，新增以下内容
    {
        'selector': '.selectedNode',
        'style': {
            'background-color': '#FF0000',
            'label': 'data(label)'
        }
    }
]

步骤2：编写节点点击回调 #

导入Dash回调依赖，监听节点点击事件，动态修改节点类属性：
首先导入所需工具：

from dash import Input, Output, State, callback

编写回调函数：

@callback(
    Output('interaction-overview', 'elements'),
    Input('interaction-overview', 'tapNodeData'),
    State('interaction-overview', 'elements'),
    prevent_initial_call=True
)
def update_selected_node(tap_data, current_elements):
    # 单选模式：清空之前选中节点的标记，不需要单选可删除本段代码
    for ele in current_elements:
        if 'selectedNode' in ele.get('classes', ''):
            ele['classes'] = ele['classes'].replace('selectedNode', '').strip()
    
    # 给当前点击的节点添加选中标记
    clicked_id = tap_data['id']
    for ele in current_elements:
        if ele.get('data', {}).get('id') == clicked_id:
            ele['classes'] = f"{ele.get('classes', '')} selectedNode".strip()
            break
    return current_elements

扩展说明 #

• 若需要点击空白处取消选中，可新增输入Input('interaction-overview', 'tapBackground')，触发时清空所有节点的selectedNode类即可
• 若需要支持多选保留所有点击过的节点为红色，删除回调中清空历史选中标记的代码段即可

内容的提问来源于stack exchange，提问作者ta.ng