添加了 Cytoscape 元素但未呈现

Question

所以我想渲染下面的Cytoscape元素，但是最后屏幕上什么也没有出现。

let cy = cytoscape({
    container: document.getElementById('cy'),
    elements: [ // list of graph elements to start with
        { // node a
            data: { id: 'a' }
        },
        { // node b
            data: { id: 'b' }
        },
        { // edge ab
            data: { id: 'ab', source: 'a', target: 'b' }
        },
        {
            data: { id: 'c' }
        },
        {
            data: {
                id: 'ac', source: 'a', target: 'c',
                'value': 'ceva',
                'value2': 'data(target)',
            }
        }
    ],

    style: [ // the stylesheet for the graph
        {
            selector: 'node',
            style: {
                'background-color': 'red',
                'label': 'data(id)'
            }
        },

        {
            selector: 'edge',
            style: {
                'width': 3,
                'line-color': 'blue',
                'target-arrow-color': '#ccc',
                'target-arrow-shape': 'triangle',
                'curve-style': 'bezier',
            }
        }
    ],

    layout: {
        name: 'grid',
        rows: 1
    }
})
cy.add([
    { group: 'nodes', data: { id: 'n0' }, position: { x: 100, y: 100 } },
    { group: 'nodes', data: { id: 'n1' }, position: { x: 200, y: 200 } },
    { group: 'edges', data: { id: 'e0', source: 'n0', target: 'n1' } }
]);

这是HTML:

<html>
  <head>
    <script src="./script.js"></script>
  </head>
  <body>
    <div id="cy"></div>
    <script src="./cyto.js"></script>
  </body>
</html>

在我看来，问题是 Cytoscape class 最终的高度 = 0。在我修改检查元素中的 class 并添加高度 = 1000px 后，它主要工作美好的。解决方案是什么，我是 Cytoscape 的新手，所以我认为这可能是一个基本错误。

Answer 1

我正在使用这种设置的 cytoscape：

<div id="cy" style="width: 900px; height: 800px;"></div>

其中高度和宽度设置在开头。

添加了 Cytoscape 元素但未呈现

Cytoscape element is added but not rendered

javascript

cytoscape.js