Dash Cytoscape②（基本的なネットワーク図）

基本的なネットワーク図

Dash Cytoscapeを使って、基本的なネットワーク図を描いてみます。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import dash
import dash_cytoscape as cyto
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    cyto.Cytoscape(
        id='cytoscape-two-nodes',
        layout={'name': 'preset'},
        style={'width': '100%', 'height': '400px'},
        elements=[
            {'data': {'id': 'one', 'label': 'Node 1'}, 'position': {'x': 75, 'y': 75}},
            {'data': {'id': 'two', 'label': 'Node 2'}, 'position': {'x': 200, 'y': 200}},
            {'data': {'source': 'one', 'target': 'two'}}
        ]
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

ノードが２つと各ノードを線でつないだ基本的なネットワーク図が表示されました。

ノードやノード間の線は選択することができ、ドラッグするとそれぞれの位置を移動することができます。

また、スクロールを行うと拡大・縮小して表示することができます。