Css Cytoscape高度画布固定为0

我正在使用cytoscape.js，当我尝试初始化它时，我发现画布高度为0。我不明白为什么

这是我的js：

var cy = cytoscape({container: document.getElementById("mapping")});

cy.add([
        {group: "nodes", data: {id: "n0"}, position: {x:0, y:0}},
        {group: "nodes", data: {id: "n1"}, position: {x:100, y:50}},
        {group: "edges", data: {id: "e0", source: "n0", target: "n1"}}
]);
console.log(cy.container());

---

这里可以看到“高度”：日志中的0px和未渲染的内容。

如果用静态数据初始化CytoCope，请考虑像文档显示：

那样做。

var cy = cytoscape({
container: document.getElementById('cy'), // container to render in
  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' }
    }
  ],
  style: [ // the stylesheet for the graph
    {
      selector: 'node',
      style: {
        'background-color': '#666',
        'label': 'data(id)'
      }
    },
    {
      selector: 'edge',
      style: {
        'width': 3,
        'line-color': '#ccc',
        'target-arrow-color': '#ccc',
        'target-arrow-shape': 'triangle'
      }
    }
  ],
  layout: {                   /!!!
    name: 'grid',
    rows: 1
  }
});

---

您在示例代码中没有指定布局，我很少这样做，我只是添加节点/边并调用我想要的布局算法，您的代码的其余部分似乎还可以，您是否包含了cytoscape的所有脚本和css文件？

您说得对，cytoscape容器必须以固定的高度和宽度初始化（在css中）（在我的示例中）。然后，您可以实现一种算法，使画布响应“页面调整大小”。