[Python] Zeichnen Sie mit Dash Cytoscape ein gerichtetes Diagramm
Ich möchte einen beweglichen gerichteten Graphen zeichnen
Ich wollte ein gerichtetes Diagramm zeichnen, das in einem Browser wie Rs visNetwork in Python ausgeführt werden kann.
NetworkX scheint als Grafikbibliothek von Python berühmt zu sein, aber dieses Mal dachte ich, dass Dash Cytoscape mit einem Bild in der Nähe von Rs visNetwork verwendet werden könnte, also werde ich es testen. Ich werde es aufschreiben.
Starten Sie den Server lokal und überprüfen Sie das Diagramm im Browser.
Ziel
--Visualisieren Sie den gerichteten Graphen aus dem zweispaltigen Datenrahmen von und nach.
-
Eingabebild
-
Bild liefern
Umgebung
- OS : Windows10
- Python : Python 3.8.3
- dash == 1.4.1
- dash-core-components == 1.3.1
- dash-html-components == 1.0.1
- dash-cytoscape == 0.2.0
Vorbereitung
Bereiten Sie einen Kantendatenrahmen mit von und nach und Knoten vor
app.py
import pandas as pd
edges = pd.DataFrame.from_dict({'from':['TABLE_B', 'TABLE_C', 'TABLE_D', 'TABLE_A', 'TABLE_X', 'TABLE_X'],
'to': ['TABLE_A', 'TABLE_A', 'TABLE_A','TABLE_X', 'TABLE_K', 'TABLE_Z']})
nodes = set()
Speichert den Inhalt von Kante und Knoten in einer Liste
app.py
cy_edges = []
cy_nodes = []
for index, row in edges.iterrows():
source, target = row['from'], row['to']
if source not in nodes:
nodes.add(source)
cy_nodes.append({"data": {"id": source, "label": source}})
if target not in nodes:
nodes.add(target)
cy_nodes.append({"data": {"id": target, "label": target}})
cy_edges.append({
'data': {
'source': source,
'target': target
}
})
<img width=""30%" alt="img" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143058/7b672b05-fa5b-8f75-f2df-97f48e0ddfbd.png ">
Definieren Sie den Stil des Knotens / der Kante
app.py
stylesheet = [
{
"selector": 'node', #Für alle Knoten
'style': {
"opacity": 0.9,
"label": "data(label)", #Die Bezeichnung des anzuzeigenden Knotens
"background-color": "#07ABA0", #Knotenfarbe
"color": "#008B80" #Knotenbeschriftungsfarbe
}
},
{
"selector": 'edge', #Für alle Kanten
"style": {
"target-arrow-color": "#C5D3E2", #Pfeilfarbe
"target-arrow-shape": "triangle", #Pfeilform
"line-color": "#C5D3E2", #Kantenfarbe
'arrow-scale': 2, #Pfeilgröße
'curve-style': 'bezier' #Standardkurve-Wenn es sich um einen Stil handelt, wird der Pfeil nicht angezeigt. Geben Sie ihn daher an
}
}]
- Es ist möglich, den Stil des Pfeils usw. unter Bezugnahme auf Folgendes anzupassen.
--Zentrieren Sie die Position des Pfeils
app.py
"style": {
"mid-target-arrow-color": "#C5D3E2",
"mid-target-arrow-shape": "triangle",
}
- Es ist auch möglich, einer bestimmten Kante oder einem bestimmten Knoten einen Stil zuzuweisen, indem eine Bedingung im "Selektor" definiert wird.
app.py
stylesheet = [
{
"selector": 'node',
'style': {
"opacity": 0.9,
"label": "data(label)",
"background-color": "#07ABA0",
"color": "#008B80"
}
},
{
"selector": '[label *= "alarm"]', #Nur Knoten, deren Bezeichnung Alarm ist"red"Zu
'style': {
"opacity": 0.9,
"label": "data(label)",
"background-color": "red",
"color": "#008B80"
}
},
{
"selector": 'edge',
"style": {
"target-arrow-color": "#C5D3E2",
"target-arrow-shape": "triangle",
"line-color": "#C5D3E2",
'arrow-scale': 2,
'curve-style': 'bezier'
}
}
]
Layout definieren
app.py
app.layout = html.Div([
dcc.Dropdown(
id='dropdown-layout',
options=[
{'label': 'random',
'value': 'random'},
{'label': 'grid',
'value': 'grid'},
{'label': 'circle',
'value': 'circle'},
{'label': 'concentric',
'value': 'concentric'},
{'label': 'breadthfirst',
'value': 'breadthfirst'},
{'label': 'cose',
'value': 'cose'}
], value='grid'
),
html.Div(children=[
cyto.Cytoscape(
id='cytoscape',
elements=cy_edges + cy_nodes,
style={
'height': '95vh',
'width': '100%'
},
stylesheet=stylesheet #Geben Sie den zuvor definierten Stil an
)
])
])
――Dieses Mal kann das Layout des Diagramms aus der Dropdown-Liste ausgewählt werden.
Erstellen Sie einen Rückruf, um das Layout zu aktualisieren
app.py
@app.callback(Output('cytoscape', 'layout'),
[Input('dropdown-layout', 'value')])
def update_cytoscape_layout(layout):
return {'name': layout}
Komplett
Voller Text
app.py
import pandas as pd
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import dash_cytoscape as cyto
app = dash.Dash(__name__)
server = app.server
# prepare data
edges = pd.DataFrame.from_dict({'from':['earthquake', 'earthquake', 'burglary', 'alarm', 'alarm'],
'to': ['report', 'alarm', 'alarm','John Calls', 'Mary Calls']})
nodes = set()
cy_edges = []
cy_nodes = []
for index, row in edges.iterrows():
source, target = row['from'], row['to']
if source not in nodes:
nodes.add(source)
cy_nodes.append({"data": {"id": source, "label": source}})
if target not in nodes:
nodes.add(target)
cy_nodes.append({"data": {"id": target, "label": target}})
cy_edges.append({
'data': {
'source': source,
'target': target
}
})
# define stylesheet
stylesheet = [
{
"selector": 'node', #Für alle Knoten
'style': {
"opacity": 0.9,
"label": "data(label)", #Die Bezeichnung des anzuzeigenden Knotens
"background-color": "#07ABA0", #Knotenfarbe
"color": "#008B80" #Knotenbeschriftungsfarbe
}
},
{
"selector": 'edge', #Für alle Kanten
"style": {
"target-arrow-color": "#C5D3E2", #Pfeilfarbe
"target-arrow-shape": "triangle", #Pfeilform
"line-color": "#C5D3E2", #Kantenfarbe
'arrow-scale': 2, #Pfeilgröße
'curve-style': 'bezier' #Standardkurve-Wenn es sich um einen Stil handelt, wird der Pfeil nicht angezeigt. Geben Sie ihn daher an
}
}]
# define layout
app.layout = html.Div([
dcc.Dropdown(
id='dropdown-layout',
options=[
{'label': 'random',
'value': 'random'},
{'label': 'grid',
'value': 'grid'},
{'label': 'circle',
'value': 'circle'},
{'label': 'concentric',
'value': 'concentric'},
{'label': 'breadthfirst',
'value': 'breadthfirst'},
{'label': 'cose',
'value': 'cose'}
], value='grid'
),
html.Div(children=[
cyto.Cytoscape(
id='cytoscape',
elements=cy_edges + cy_nodes,
style={
'height': '95vh',
'width': '100%'
},
stylesheet=stylesheet
)
])
])
@app.callback(Output('cytoscape', 'layout'),
[Input('dropdown-layout', 'value')])
def update_cytoscape_layout(layout):
return {'name': layout}
if __name__ == '__main__':
app.run_server(debug=False)
Lauf
$ python app.py
Ich denke, wir haben eine Netzwerkvisualisierung wie das visNetwork von R erreicht. Bitte probieren Sie es aus.
Referenz
Was ist ein gerichteter Graph? Dash Cytoscape
-Wenn Sie mit [NetworkX] zeichnen (https://networkx.github.io/documentation/stable/auto_examples/drawing/plot_directed.html)
networkx_sample.py
# https://networkx.github.io/documentation/stable/auto_examples/drawing/plot_directed.html#sphx-glr-auto-examples-drawing-plot-directed-py
# Author: Rodrigo Dorantes-Gilardi ([email protected])
import matplotlib as mpl
import matplotlib.pyplot as plt
import networkx as nx
G = nx.generators.directed.random_k_out_graph(10, 3, 0.5)
pos = nx.layout.spring_layout(G)
node_sizes = [3 + 10 * i for i in range(len(G))]
M = G.number_of_edges()
edge_colors = range(2, M + 2)
edge_alphas = [(5 + i) / (M + 4) for i in range(M)]
nodes = nx.draw_networkx_nodes(G, pos, node_size=node_sizes, node_color='blue')
edges = nx.draw_networkx_edges(G, pos, node_size=node_sizes, arrowstyle='->',
arrowsize=10, edge_color=edge_colors,
edge_cmap=plt.cm.Blues, width=2)
# set alpha value for each edge
for i in range(M):
edges[i].set_alpha(edge_alphas[i])
pc = mpl.collections.PatchCollection(edges, cmap=plt.cm.Blues)
pc.set_array(edge_colors)
plt.colorbar(pc)
ax = plt.gca()
ax.set_axis_off()
plt.show()
Recommended Posts