1
我正在通過編程方式生成一個Java Web應用程序中的圖表，該圖表應該發送到Cytoscape.js（2.7.10）以便在其中顯示它。爲了將數據從應用程序傳輸到Cytoscape.js，我使用gson（2.8.1）構建了一個JSON對象。到達在JavaScript的部分數據如下所示：在Cytoscape.js中顯示JSON數據
{"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）之後，佈局allkind選項之前。
像
var eles = cy.add(JSON.parse(inputdata));
cy.json(JSON.parse(inputdata));
cy.json(JSON.stringify(inputdata));
cy.add(JSON.parse(inputdata))
cy.load(JSON.parse(inputdata));
cy.load(inputdata);
沒有他們的工作。大多數情況下，我會看到一個可以放大和縮小的大節點，但這顯然不是假設存在的。
有趣地我可以設置一個圖表，如果我手動設置後，並通過這個函數調用佈局前添加數據：
var eles = cy.add([ {
group : "nodes",
data : {
id : "n0",
name : "A",
weight : 75
}
}, {
group : "nodes",
data : {
id : "n1",
name : "B",
weight : 75
}
},
….
任何人任何想法？
乾杯
揚科