Cytoscape - 绘制整个屏幕答案

【问题标题】：Cytoscape - graph entire screenCytoscape - 绘制整个屏幕
【发布时间】：2021-11-23 20:19:22
【问题描述】：

我需要渲染图形并且我想使用 cytoscape（plotly dash cytoscape）。因为使用 plotly dash 包装器，可以在 python 中编写所有内容，我不需要将我的（小）应用程序拆分为后端和前端部分。

我希望图表使用整个屏幕并以良好且可读的方式对节点进行排序。不幸的是，我没有在 api 文档中找到所有可能参数的描述。

我想在way 中而不是图片中的渲染。

你知道如何解决这个问题吗？图表有整个可用空间，我可以用鼠标将它移动到任何我想要的地方。

这些是我当前的属性：

cyto.Cytoscape(
id='knowledge-graph',
layout={
    'name': 'cose',
    'idealEdgeLength': 1000,
    'nodeOverlap': 500,
    'refresh': 20,
    'fit': True,
    'padding': 30,
    'randomize': False,
    'componentSpacing': 1000,
    'nodeRepulsion': 400000,
    'nestingFactor': 5,
    'gravity': 800,
    'numIter': 1000,
    'initialTemp': 200,
    'coolingFactor': 0.95,
    'minTemp': 1.0
},
style={
    "width": "100%",
    "height": "calc(100vh - 150px)",
},
stylesheet=[
    {'selector': 'edge', 'style': {'label': 'data(label)', 'curve-style': 'haystack',
                                   'haystack-radius': 0,
                                   'width': 5,
                                   'opacity': 0.5,
                                   'line-color': '#a8eae5'}, 'text-wrap': 'wrap'},
    {'selector': 'node', 'style': {'label': 'data(label)', 'background-color': '#30c9bc'}, 'text-wrap': 'wrap'},
]

)

谢谢！

【问题讨论】：

这是什么布局？添加用于呈现当前图形的设置可能会有所帮助
我添加了属性。基本上它是演示页面中的 cos 布局（我玩了一些属性）
如果您还没有找到它，这个question 可能会引起您的兴趣
所以基本上我必须使用这些参数来查看哪些对我的数据有效？是否有此参数的文档？您知道如何在初始渲染时使图形居中吗？
玩弄参数并不是最直接有用和令人愉快的建议，我完全理解。但也有这部分“其他力布局，如 CoSE-Bilkent 和 Cola，对开发人员来说更容易使用”，我认为这可能是一种选择。我不知道初始居中的设置，但应该可以通过在初始化后直接调用cy.center() 来实现。我猜你已经找到了this list，它涵盖了所有可能的选项，遗憾的是缺少详细描述

标签： javascript plotly-dash cytoscape.js

【解决方案1】：

您可以尝试使用cytoscape-spread 布局，它首先对初始位置应用力导向布局，然后使用基于 voronoi 的方法将节点分布在剩余空间中。您可以查看它的演示 here 和 here。

【讨论】：

谢谢，我尝试使用扩展布局。不幸的是，动画后图表消失了，布局对我来说很慢。 cos-bilkent 布局在我身上看起来更好。还是谢谢
那你也可以试试 cytoscape-fcose，它是 cose-bilkent 的更快版本。它还引入了与 cos-bilkent 相比的其他功能，例如组件打包和布局约束。
不幸的是，我找不到将 fcose 与 plotly dash cytoscape 包装器一起使用的方法...