Question

我正在使用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，您可以在其中看到日志中的“高度”：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文件？

Cytoscape高度画布固定为0

1 个答案: