css - Cytoscape 高度 Canvas 固定为 0

Question

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

这是我的代码:

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您可以在日志中看到“高度”:0 像素，而在渲染中什么也没有。

Answer 1

如果您使用静态数据初始化 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
  }
});

你没有在你的示例代码中指定布局，我很少那样做，我只是添加节点/边缘并调用我想要的布局算法，你的代码的其余部分似乎没问题，你包括所有脚本和 css cytoscape 的文件？