Dash Plotly Cytoscape 初始缩放不起作用

Question

我正在尝试在 Plotly Dash 上创建一个 Cytoscape。我在 Cytoscape 道具中给出的缩放值不影响。

cyto.Cytoscape(
    id='my-cytoscape',
    zoom=500,
    layout={"name": "preset"},
    style={"width": "100%", "height": "600px"},
    stylesheet=[{
        "selector": "node",
        "style": {"width": "data(node_size)",
                  "height": "data(node_size)",
                  "label": "data(label)",
                  "backgroundColor": "blue",
                  "fontSize": "11px"},
    },
        {"selector": "edge",
         "style": {"width": 0.4, "curve-style": "bezier"}},
    ],
)

Answer 1

我认为问题在于 preset 布局默认将 fit 设置为 True (source)。

文档告诉我们这个问题：

Initial viewport state
zoom : The initial zoom level of the graph. Make sure to disable viewport manipulation options, such as fit, in your layout so that it is not overridden when the layout is applied...

https://github.com/cytoscape/cytoscape.js/blob/e6541de603f5714f572238573ea06ef17503282b/documentation/md/core/init.md#initial-viewport-state

所以您只需要在 Cytoscape 组件的 layout 属性:

中将 fit 设置为 False

layout = (
    {
        "name": "preset",
        "fit": False,
    },
)

另外，当我测试它时，你的缩放级别对我来说太放大了。

最小的完全可重现的例子：

import dash
import dash_cytoscape as cyto
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        cyto.Cytoscape(
            id="cytoscape-two-nodes",
            zoom=5,
            style={"width": "100%", "height": "600px"},
            layout={
                "name": "preset",
                "fit": False,
            },
            elements=[
                {
                    "data": {"id": "one", "label": "Node 1"},
                    "position": {"x": 75, "y": 75},
                },
                {
                    "data": {"id": "two", "label": "Node 2"},
                    "position": {"x": 200, "y": 200},
                },
                {"data": {"source": "one", "target": "two"}},
            ],
        )
    ]
)

if __name__ == "__main__":
    app.run_server()

Dash Plotly Cytoscape 初始缩放不起作用

Dash Plotly Cytoscape initial zoom isn't working

python

cytoscape

plotly-dash