如何使用 Dash 制作有向图

问题描述

我复制了这段代码：

import dash
import dash_core_components as dcc
import dash_html_components as 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'}},'target': 'qc'}}
        ],layout={'name': 'breadthfirst'},style={'width': '400px','height': '500px'}
    )
])

app.run_server(debug=True)

如何在此图中添加有向边？我在网上看到过一些例子，它们都添加了 Matplotlib 和 Plotly。我想用最小的改动来改变它。有什么办法吗？

解决方法

我不确定您是在谈论使您的布局 (i) 定向还是具有 (ii) 边缘箭头（或两者）：

(i) 您可以将参数 'directed':True 添加到您的布局中。新布局将是：

layout = {'name':'breadthfirst','directed':True}

其他可用参数可以在 Cytoscape JavaSript 文档中查看 -> https://js.cytoscape.org/

(ii) 您可以查看 Dash_cytoscape 文档中的 Edge Arrows 示例 -> https://dash.plotly.com/cytoscape/styling