我可以将破折号中的节点作为超链接单击吗？

Question

我有这段代码（来自 here），它按预期生成了一个网络：

import dash
import dash_core_components as dcc
from dash import html
import dash_cytoscape as cyto
from dash.dependencies import Input, Output
import plotly.express as px

    app = dash.Dash(__name__)
    
    app.layout = html.Div([
        html.P("Dash Cytoscape:"),
        cyto.Cytoscape(
            id='cytoscape',
            elements=[
                {'data': {'id': 'ca', 'label': 'Canada'}}, 
                {'data': {'id': 'on', 'label': 'Ontario'}}, 
                {'data': {'id': 'qc', 'label': 'Quebec'}},
                {'data': {'source': 'ca', 'target': 'on'}}, 
                {'data': {'source': 'ca', 'target': 'qc'}}
            ],
            layout={'name': 'breadthfirst'},
            style={'width': '1000px', 'height': '1000px'}
        )
    ])
    
    if __name__ == '__main__':
       app.run_server()

我只是想知道，有人知道我是否能够 to/how 编辑这段代码，以便我可以点击一个节点，它是一个网页的超链接（例如，在这种情况下可以只是每个节点的维基百科页面）。

Answer 1

您可以创建一个回调，根据单击的节点设置 dcc.Location 组件的 href 属性：

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        dcc.Location(id="location"),
        cyto.Cytoscape(
            id="cytoscape",
            elements=[
                {"data": {"id": "ca", "label": "Canada"}},
                {"data": {"id": "on", "label": "Ontario"}},
                {"data": {"id": "qc", "label": "Quebec"}},
                {"data": {"source": "ca", "target": "on"}},
                {"data": {"source": "ca", "target": "qc"}},
            ],
            layout={"name": "breadthfirst"},
            style={"width": "1000px", "height": "1000px"},
        ),
    ]
)


@app.callback(
    Output("location", "href"),
    Input("cytoscape", "tapNodeData"),
    prevent_initial_call=True,
)
def navigate_to_url(node_data):
    return f"https://en.wikipedia.org/wiki/{node_data['label']}"

我可以将破折号中的节点作为超链接单击吗？

Can I make a node clickable in dash as a hyperlink?

python

cytoscape

plotly

plotly-dash

我可以将破折​​号中的节点作为超链接单击吗？

Can I make a node clickable in dash as a hyperlink?

python

cytoscape

plotly

plotly-dash

我可以将破折号中的节点作为超链接单击吗？