使用Dash Cytoscape更改回调中节点的标签

Question

我已经用Dash Cytoscapes创建了一些节点。我的最终目标是，在单击节点后应该会出现一个Slider。通过使用此Slider选择值，节点的标签应使用选定的值更新。由于我无法在单击节点后显示滑块，我使其永久显示在节点下方。希望你有一些想法来达到我的愿望。

import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
import dash_cytoscape as cyto
app = dash.Dash(__name__)
app.layout = html.Div([
cyto.Cytoscape(  
id='node-callback-event',
layout={'name': 'preset'},
style={'width': '100%', 'height': '2000px', 'display': 'block'},
elements=[
{
'data': {'id': 'root', 'label': 'test label'},
'position': {'x': 750, 'y': 750},
'locked': True
}
]
),
html.Label('Slider'),
dcc.Slider(
id='slider-update-value',
min=0,
max=100,
value=0,
step=0.01,
tooltip = {"placement": "bottom", 'always_visible': False },
included=False,
updatemode='drag',
),
], 
style={'padding': 1, 'flex': 1})
@app.callback(Output('node-callback-event', 'elements'),
Input('node-callback-event', 'tapNodeData'),
Input('slider-update-value', 'value'))
def displayTapNodeData(node, probability):
if node:
node['label'] += str(probability)

# how to assign the value to the nodes label? 
if __name__ == '__main__':
app.run_server(debug=True)

Answer 1

您可以将滑块包装在div元素中，默认情况下可以使用hidden属性隐藏该元素：

html.Div(id='slider', hidden=True, children=[
html.Label('Slider'),
dcc.Slider(
id='slider-update-value',
# options...
)
])

然后，当使用tapNodeData或selectedNodeData事件选择节点时，更新该属性，我在这里使用selectedNodeData，因为当您取消选择节点时(即，如果您想隐藏滑块(，另一个不会被激发：

@app.callback(
Output('slider', 'hidden'),
Input('node-callback-event', 'selectedNodeData'))
def displaySlider(data):
return False if data else True

现在，给定滑块的Inputvalue，您希望更新Cytoscapeelements的Output，给定当前所选节点(再次为tapNodeData或selectedNodeData(的State：

@app.callback(Output('node-callback-event', 'elements'),
Input('slider-update-value', 'value'),
State('node-callback-event', 'elements'),
State('node-callback-event', 'selectedNodeData'))
def updateNodeLabel(value, elements, selected):
if selected:
# Update only the selected element(s)
ids = [nodeData['id'] for nodeData in selected]
nodes = ((i,n) for i,n in enumerate(elements) if n['data']['id'] in ids)
for i, node in nodes:
elements[i]['data']['label'] = 'test-' + str(value)
return elements

@参见Cytoscape回调和事件