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}}）; 的}）;

即，最后添加}）; ，图表就会显示出来。

Cytoscape.js - 如何显示用Java生成的节点

1 个答案: