如何配置Plotly Dash Cytoscape实现图谱全屏显示与可读节点布局

解决方案 #

1. 优先更换适配有序排布的布局算法 #

你当前使用的cose是力导向布局，天然生成的节点排布离散性较高，无法达到目标效果的规整分层效果。如果你的图谱存在层级/从属关联，推荐切换为dagre布局，可直接实现分层有序的排布效果，和你给出的目标效果图匹配度最高。
如果你的节点无层级关系，可按需选择grid（网格排布）、circle（环形排布）等规整布局。

2. 布局参数优化 #

若使用dagre布局的参考配置：

layout={
    'name': 'dagre',
    'rankDir': 'TB', # 排布方向：TB从上到下，LR从左到右
    'rankSep': 150, # 层间距
    'nodeSep': 80, # 同层节点间距
    'fit': True,
    'padding': 30
}

若坚持使用cose力导向布局的参数调整：

你当前的idealEdgeLength、nodeRepulsion参数设置过大，会导致节点被推得过远、排布散乱，可调整为以下数值缩小节点间距、降低离散度：

layout={
    'name': 'cose',
    'idealEdgeLength': 150,
    'nodeOverlap': 20,
    'refresh': 20,
    'fit': True,
    'padding': 30,
    'randomize': False,
    'componentSpacing': 100,
    'nodeRepulsion': 8000,
    'nestingFactor': 5,
    'gravity': 200,
    'numIter': 1000,
    'initialTemp': 200,
    'coolingFactor': 0.95,
    'minTemp': 1.0
}

3. 样式代码修正与可读性优化 #

你当前的text-wrap属性位置错误，应该放在节点/边的style字段内而非平级，同时可补充文本对齐、节点大小等配置避免标签重叠：

stylesheet=[
    {
        'selector': 'edge', 
        'style': {
            'label': 'data(label)', 
            'curve-style': 'haystack',
            'haystack-radius': 0,
            'width': 2,
            'opacity': 0.7,
            'line-color': '#a8eae5',
            'text-wrap': 'wrap',
            'font-size': 12,
            'text-background-color': '#fff',
            'text-background-opacity': 0.8
        }
    },
    {
        'selector': 'node', 
        'style': {
            'label': 'data(label)', 
            'background-color': '#30c9bc',
            'width': 40,
            'height': 40,
            'text-wrap': 'wrap',
            'font-size': 12,
            'text-valign': 'center',
            'text-halign': 'center',
            'color': '#fff'
        }
    }
]

4. 全屏适配优化 #

你当前的尺寸配置已基本满足全屏需求，可补充父容器样式清除默认边距，确保无多余留白：

style={
    "width": "100%",
    "height": "calc(100vh - 150px)",
    "margin": 0,
    "padding": 0
}

内容的提问来源于stack exchange，提问作者GameYoker