Python 是否可以在dashcytoscape中使用宽度优先布局中的epthSort参数

发布于02月19日

我正在用Dash-Cytoscape绘制一个网络，使用breadthfirst布局，如here所示.

我想控制元素在同一级别上的出现顺序.JS API有depthSort参数来实现这一点，但我不知道如何在Python中传递前端可以接受的回调.

我试过的东西:

"depthSort": lambda a,b: a - b个
"depthSort": "(a,b) => a - b"个
"depthSort": "function (a,b) { return a - b}"

最小示例:

我想要得到这个:

   1
3     2

但我得到的是:

   1
2     3

from dash import Dash
import dash_cytoscape as cyto

app = Dash(__name__)

app.layout = cyto.Cytoscape(
    elements=[
        {"data": {"id": "1", "label": "1"}},
        {"data": {"id": "2", "label": "2"}},
        {"data": {"id": "3", "label": "3"}},
        {"data": {"source": "1", "target": "2"}},
        {"data": {"source": "1", "target": "3"}},
    ],
    layout={
        "name": "breadthfirst",
        "roots": ["1"],
        # "depthSort": ?
    },
)

app.run_server(debug=True)

推荐答案

在Python中不支持期望JS函数的选项，因为这意味着将函数作为字符串传递，因此需要Cytoscape.js来处理任意字符串，这可能是出于安全原因而不想要的.

也就是说，Dash支持clientside callbacks(JS)，因此我们仍然可以在回调中分配函数:

from dash import Dash, Output, Input, State
import dash_cytoscape as cyto

app = Dash(__name__)

app.layout = cyto.Cytoscape(
    id="cyto",
    elements=[
        {"data": {"id": "1", "label": "1"}},
        {"data": {"id": "2", "label": "2"}},
        {"data": {"id": "3", "label": "3"}},
        {"data": {"source": "1", "target": "2"}},
        {"data": {"source": "1", "target": "3"}},
    ],
    layout={
        "name": "breadthfirst",
        "roots": ["1"]
    }
)

app.clientside_callback(
    """
    function (id, layout) {
        layout.depthSort = (a, b) => b.data('id') - a.data('id');
        cy.layout(layout).run();
        return layout;
    }
    """,
    Output('cyto', 'layout'),  # update the (dash) cytoscape component's layout
    Input('cyto', 'id'),       # trigger the function when the Cytoscape component loads (1)
    State('cyto', 'layout'),   # grab the layout so we can update it in the function
    prevent_initial_call=False # ensure (1) (needed if True at the app level)
)

app.run_server(debug=True)

注意:我们需要执行cy.layout(layout).run()，因为没有添加/删除任何元素，所以它不会自动运行.