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);
    }
  });
});

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

Cytoscape js - Initiliaze the graph using cytoscape-graphml.js

cytoscape.js