从数据框中使用 Dash Cytoscape

编程问答 2022-05-19

问题描述

让我们说，我有下表。

df

source    target     Weight
A            B        10
A            C        8
C            F        8
B            F        6
F            D        6
B            E        4

我能够使用 networkx 库设法绘制它。我也想尝试使用 Dash Cytoscope 组件。

我尝试了以下方法。但还没有成功。

app.layout = html.Div([
    html.Div([
 
        cyto.Cytoscape(
            id='org-chart',autoungrabify=True,minZoom=0.2,maxZoom=1,layout={'name': 'breadthfirst'},style={'width': '100%','height': '500px'},elements=
                [
                    # Nodes elements
                    {'data': {'id': x,'label': x}} for x in df.name
                ]
                +
                [
                    # Edge elements
                    {'data': {'source': df['source'],'target': df['target']}},]
        )
    ],className='six columns'),html.Div([
        html.Div(id='empty-div',children='')
    ],className='one column'),],className='row')

对此的任何帮助表示赞赏。

解决方法

问题在于您尝试使用整个数据框列来定义边缘，而不是对其进行迭代（就像对节点所做的那样）。您是否尝试过以下代码？

edges = [{'data': {'source': x,'target': y}} for x,y in zip(df.source,df.target)]
cytoscapenetworkxplotly-dash