Cytoscape.js - 如何顯示Java中生成的節點

Question

我想使用Java EE應用程序服務器端生成的數據顯示圖形。所以我的問題是如何把一些數據結構（JSONObject的）的下面的代碼爲「元素」一節：

$(function(){ // on dom ready 

var cy = cytoscape({ 
container: document.getElementById('cy'), 

style: cytoscape.stylesheet() 
.selector('node') 
    .css({ 
    'content': 'data(id)' 
    }) 
.selector('edge') 
    .css({ 
    'target-arrow-shape': 'triangle', 
    'width': 4, 
    'line-color': '#ddd', 
    'target-arrow-color': '#ddd' 
    }) 
.selector('.highlighted') 
    .css({ 
    'background-color': '#61bffc', 
    'line-color': '#61bffc', 
    'target-arrow-color': '#61bffc', 
    'transition-property': 'background-color, line-color, target-arrow-color', 
    'transition-duration': '0.5s' 
    }), 

elements: { 
    nodes: [ 
    { data: { id: 'a' } }, 
    { data: { id: 'b' } }, 
    { data: { id: 'c' } }, 
    { data: { id: 'd' } }, 
    { data: { id: 'e' } } 
    ], 

    edges: [ 
    { data: { id: 'a"e', weight: 1, source: 'a', target: 'e' } }, 
    { data: { id: 'ab', weight: 3, source: 'a', target: 'b' } }, 
    { data: { id: 'be', weight: 4, source: 'b', target: 'e' } }, 
    { data: { id: 'bc', weight: 5, source: 'b', target: 'c' } }, 
    { data: { id: 'ce', weight: 6, source: 'c', target: 'e' } }, 
    { data: { id: 'cd', weight: 2, source: 'c', target: 'd' } }, 
    { data: { id: 'de', weight: 7, source: 'd', target: 'e' } } 
    ] 
}, 

layout: { 
name: 'breadthfirst', 
directed: true, 
roots: '#a', 
padding: 10 }}); 

完整的示例可以發現here。我不介意在圖形邏輯的頁面上使用scriptlet來調用一些java代碼，這將使我獲得所需的數據。但在那之後如何把結果放在「元素」下來實現動態生成的圖形（節點和邊）呢？

Answer 1

這是一個關閉花括號的簡單錯誤。變化：

佈局：{ 名： 'breadthfirst'， 定向：真， 根： '#A'， 填充：10}}）;

到：

佈局：{ 名： 'breadthfirst'， 定向：真， 根： '#A'， 填充：10}}）; }）;

即，add }）;在最後，圖表會顯示出來。