イベントコールバック/tapNodeData
tapNodeDataを使って、クリックしたノードのデータ辞書を取得します。
コールバック関数の入力(Input)にtapNodeDataを指定しています。(63行目)
[ソースコード]
1 | import json |
取得したノード情報は、json.dumps関数を使って文字列に変換しています。(65行目)
[ブラウザで表示]
ノードをクリックするとそのノードの情報がブラウザ下部に表示されることを確認できます。
tapNodeDataを使って、クリックしたノードのデータ辞書を取得します。
コールバック関数の入力(Input)にtapNodeDataを指定しています。(63行目)
[ソースコード]
1 | import json |
取得したノード情報は、json.dumps関数を使って文字列に変換しています。(65行目)
[ブラウザで表示]
ノードをクリックするとそのノードの情報がブラウザ下部に表示されることを確認できます。
ノードやエッジなどDash Cytoscapeコンポーネントに対する操作をトリガーに、ネットワーク図やほかのコンポーネントを変化させることができます。
このようなコールバックのことをイベントコールバックと呼びます。
イベントコールバックを一覧にまとめます。
イベント | 内容 |
---|---|
tapNode | クリックしたノードの要素辞書全体を取得する。 |
tapNodeData | クリックしたノードのデータ辞書を取得する。 |
tapEdge | クリックしたエッジの要素辞書全体を取得する。 |
tapEgdeData | クリックしたエッジのデータ辞書を取得する。 |
mouseoverNode | マウスオーバーしたノードのデータ辞書を取得する。 |
mouseoverEdgeData | マウスオーバーしたエッジのデータ辞書を取得する。 |
selectedNodeData | 選択したノードのデータ辞書を取得する。 |
selectedEdgeData | 選択したエッジのデータ辞書を取得する。 |
次回からはイベントコールバックを使ったサンプルを実行していきます。
今回はコールバックを使って、ノードの追加と削除を行います。
[ソースコード]
1 | import dash |
コールバック関数(update_elements)では、現在表示されているノード(current_nodes)と削除済みのノード(deleted_nodes)を管理しています。
追加ボタンがクリックされた場合は、削除済みノードの1つを表示ノードにし、エッジ(ノードとノードを結ぶ線)も合わせて表示します。
削除ボタンがクリックされた場合は、表示ノードの1つを削除済みノードとして、エッジと合わせて非表示にします。
[ブラウザで表示]
Add Nodeボタンを押すとノードが追加され、Remove Nodeボタンを押すとノードが削除されることを確認できます。
コールバックを使うと、ユーザ操作をトリガーにしてDash Cytoscapeのコンポーネントを変化させることができます。
コールバックを作成する手順は次の通りです。
ドロップダウンリストで、ノードのレイアウトを変更することができるサンプルソースは下記の通りです。
[ソースコード]
1 | import dash |
コルバック関数は 62~68行目 で定義しています。
ドロップダウンリストの値を入力として、その入力値をノードのレイアウトとして設定しています。
[ブラウザで表示]
ブラウザ上部にドロップダウンリストが表示され、レイアウトを選択するとノードの配置が変更されます。
レイアウト辞書の“name”キーに“random”を指定すると、ノードをランダムに配置することができます。(50行目)
[ソースコード]
1 | import dash |
[ブラウザで表示]
リロードするたびにノードがランダムに配置されることを確認できます。
レイアウト辞書の“name”キーに“cose”を指定すると、物理シミュレーションに基づく方法でノードを自動配置することができます。(50行目)
[ソースコード]
1 | import dash |
[ブラウザで表示(gravity=1の場合)]
物理シミュレーションに基づいて、ノードが自動的に配置されました。
オプションとして“gravity”キー(デフォルトは 1 )を設定すると、物理シミュレーション時の重力の強さを指定できます。
“gravity”キーに100を指定してみます。(上記ソースの51行目をコメントアウト)
[ブラウザで表示(gravity=100の場合)]
デフォルト(“gravity”=1)よりもノードが密に配置されていることが確認できます。
レイアウト辞書の“name”キーに“breadthfirst”を指定すると、ノードを階層的に配置することができます。(47行目)
デフォルトでは、ルートとなるノードが自動で推測されますが、オプションとして“roots”キーにノードIDを指定すると、任意のノードをルートに設定できます。(48行目)
[ソースコード]
1 | import dash |
[ブラウザで表示]
New Yorkをrootとして階層的にノードを配置することができました。
レイアウト辞書の“name”キーに“concentric”を指定すると、ノードを同心円状に配置することができます。(47行目)
[ソースコード]
1 | import dash |
[ブラウザで表示]
ノードを同心円状に配置することができました。
レイアウト辞書の“name”キーに“grid”を指定すると、ノードを格子状に配置することができます。(47行目)
オプションとして“rows”キーと“columns”キー(48~49行目)を指定することで、行数と列数を設定することができます。
[ソースコード]
1 | import dash |
[ブラウザで表示]
ノードを3行3列の格子状に配置することができました。
レイアウト辞書の“name”キーに“circle”を指定すると、ノードを円形に配置することができます。(46~48行目)
[ソースコード]
1 | import dash |
[ブラウザで表示]
ノードを円形に配置することができました。