Dash Cytoscape③(ブール型属性)

ブール型属性

ブール型属性を設定すると、ネットワーク図のノードを選択できなくしたり、移動できなくしたりすることができます。

  • locked属性
    Trueを設定すると、移動できなくなる。選択は可能。
  • selected属性
    Trueを設定すると、初期状態で選択された状態になる。他のノードを選択すると非選択状態になる。移動は可能。
  • selectable属性
    Falseを設定すると、選択状態にできなくなる。移動は可能。
  • grabbable属性
    Falseを設定すると、移動できなくなる。選択状態にはできる(?)

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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-elements-boolean',
layout={'name': 'preset'},
style={'width': '100%', 'height': '400px'},
elements=[
{
'data': {'id': 'one', 'label': 'Locked'},
'position': {'x': 75, 'y': 75},
'locked': True
},
{
'data': {'id': 'two', 'label': 'Selected'},
'position': {'x': 75, 'y': 200},
'selected': True
},
{
'data': {'id': 'three', 'label': 'Not Selectable'},
'position': {'x': 200, 'y': 75},
'selectable': False
},
{
'data': {'id': 'four', 'label': 'Not grabbable'},
'position': {'x': 200, 'y': 200},
'grabbable': False
},
{'data': {'source': 'one', 'target': 'two'}},
{'data': {'source': 'two', 'target': 'three'}},
{'data': {'source': 'three', 'target': 'four'}},
{'data': {'source': 'two', 'target': 'four'}},
]
)
])

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

[ブラウザで表示]

設定した属性値通りに、ノードによって選択できなくなったり、移動できなくなったりしていることが確認できます。