python - 使用 Dash Cytoscape 在回调中更改节点的标签
问题描述
我用 Dash Cytoscapes 创建了一些节点。我的最终目标是单击节点后应该出现一个滑块。通过使用此 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)
解决方案
您可以将滑块包装在一个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
现在,给定滑块的输入 value
,您想要更新Cytoscape的输出elements
,给定当前选定节点的状态(tapNodeData
或selectedNodeData
再次):
@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
推荐阅读
- bash - Running executable file with additional options or arguments
- swift - 通缉:用于协议组合的优雅 validateUserInterfaceItem 实现
- android - 如何在不同的 Android 应用程序之间共享密钥(敏感信息)?
- node.js - 使用 jsonix 将 JSON 编组为 XML 会导致 XML 无效
- sql - 如何将2列转置为行
- tensorflow - 如何清除 Tensorflow-Keras GPU 内存?
- rust - 是否可以编写一个折叠迭代器的 const 函数?
- python-3.x - 选择带有 Selenium -error 的复选框:元素无法滚动到视图中
- javascript - 为什么我的`` 有时能工作而其他人不能工作?
- python - Django - 如何为可重用应用程序进行迁移