Cytoscape js - 使用 cytoscape-graphml.js 初始化图形

Question

我有一个 graphML 文件。我想在浏览器上显示我的 graphML 文件中的图形。我正在使用 cytoscape.js。据我了解，我们可以使用 cytoscape 扩展 cytoscape-graphml.js 从 graphML 文件中导入图形。但我不知道该怎么做。这是我想要实现的示例。

var cy;
fetch('http://localhost/Development/example.graphml')
.then(response => response.text())
.then((data) => {
   cy = cytoscape({
     container: document.getElementById('cy'),
     elements: data
   });
});

Answer 1

好吧，正如您在 cytoscape.js-graphml 的 docs 中看到的那样，您只需要使用 graphml 数据和如下布局来初始化 cytoscape：

var cy;
fetch('http://localhost/Development/example.graphml')
.then(response => response.text())
.then((data) => {
   cy = cytoscape({
     container: document.getElementById('cy'),
     style: [
        {
            selector: 'node',
            style: {
                'content': 'data(id)'
            }
        },
        {
            selector: 'edge',
            style: {
                'target-arrow-shape': 'triangle'
            }
        }
    ],         
    ready: function () {
        this.graphml({layoutBy: 'cose'});
        this.graphml(data);
    }
  });
});