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)

[ブラウザで表示]

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

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

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