css - Cytoscape高度 Canvas 固定为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());

这是jsfiddle，您可以在日志中看到“高度”：0px，而没有看到任何内容。

最佳答案

如果使用静态数据初始化cytoscape，请考虑按照文档所示进行操作：

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文件？

关于css - Cytoscape高度 Canvas 固定为0，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51495143/