Javascript 在Cytoscape.js中显示JSON数据

我正在Java Web应用程序中以编程方式生成一个图形，该图形应该发送到Cytoscape.js（2.7.10）以便在那里显示。为了将数据从应用程序传输到Cytoscape.js，我使用gson（2.8.1）构建了一个JSON对象。到达JavaScript部分的数据如下所示：

{"elements":[{"nodes":[{"group":"nodes","data":{"id":"a","name":"Eins"}},{"group":"nodes","data":{"id":"b","name":"Zwei"}},{"group":"nodes","data":{"id":"c","name":"Drei"}},{"group":"nodes","data":{"id":"d","name":"Vier"}}]},{"edges":[{"group":"edges","data":{"id":"e","name":"1-2","source":"a","target":"b"}},{"group":"edges","data":{"id":"f","name":"2-3","source":"b","target":"c"}},{"group":"edges","data":{"id":"g","name":"2-4","source":"b","target":"d"}}]}]}

设置cytoscape“窗口”如下所示

return function(callbackuri, inputdata, divname, title, colorstr) {
    console.log("CytoScape Test ver:0.1.9");
    console.log("Data String send to cyto * "+inputdata+" *");
    var cy = cytoscape({
        container : $('#cy'),
        elements: JSON.parse(inputdata),
        style: [
            {
                selector: 'node',
                style: {
                    'label': 'data(name)',
                    'width': '60px',
                    'height': '60px',
                    'color': 'blue',
                    'background-fit': 'contain',
                    'background-clip': 'none'
                }
            }
            , {
                selector: 'edge',
                style: {
                    'text-background-color': 'yellow',
                    'text-background-opacity': 0.4,
                    'width': '6px',
                    'target-arrow-shape': 'triangle',
                    'control-point-step-size': '140px'
                }
            }]
    });

    //
    cy.layout(concentric_options);
    cy.fit();
})

我还尝试通过元素跳过设置：JSON.parse（inputdata），在设置之后和布局之前，使用各种选项

像

它们都不起作用。大多数情况下，我会看到一个大节点，我可以缩放和平移，但这显然不是应该存在的

有趣的是，如果我通过此函数调用在设置之后和布局之前添加数据，我可以手动设置图形：

var eles = cy.add([ {
    group : "nodes",
    data : {
        id : "n0",
        name : "A",
        weight : 75
    }
}, {
    group : "nodes",
    data : {
        id : "n1",
        name : "B",
        weight : 75

    }
},
….

有人知道吗

干杯

---

Janko

您的JSON无效。请看规格：

---

元素

是数组或对象，而不是一个封装在另一个中。

您的JSON无效。请看规格：

元素

是数组或对象，而不是一个包裹在另一个中

var eles = cy.add([ {
    group : "nodes",
    data : {
        id : "n0",
        name : "A",
        weight : 75
    }
}, {
    group : "nodes",
    data : {
        id : "n1",
        name : "B",
        weight : 75

    }
},
….