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