javascript - 细胞景观 : Graph is not displayed when page is loaded

Question

我已将 cytoscape 图合并到一个初始状态为 {display:none} 的 div 中。

当显示 div ($('div#id').show()) 时，图表不会显示，除非用户调整浏览器窗口的大小。

我用 js 控制台查看了 css，发现 Canvas 的初始 css 是这样的:width: 0px;高度:0px。

只有当浏览器窗口调整大小时 Canvas 才会继承#cy的宽高:

初始 CSS 状态:

<div id="cy">
    <div style="position: absolute; z-index: 0; overflow: hidden; width: 0px; height: 0px;">**<canvas data-id="layer0-selectbox" width="0" height="0" style="position: absolute; z-index: 5; width: 0px; height: 0px;"></canvas>...

调整浏览器窗口大小时的 CSS 状态:

 <div id="cy"><div style="position: absolute; z-index: 0; overflow: hidden; width: 560px; height: 420px;"><canvas data-id="layer0-selectbox" width="560" height="420" style="position: absolute; z-index: 5; **width: 560px; height: 420px;"**>...

知道为什么会这样吗？你能帮我解决这个问题吗？

Answer 1

不幸的是，鉴于 DOM 的工作方式，您不能(单独)在这种情况下使用 display: none。

display: none 会干扰尺寸检测，因此您需要要么

(1) 使用另一个 CSS 属性，例如 visibility: hidden 或 offpage absolute positioning，或者

(2) 调用cy.resize()在显示图形时明确显示。