Cytoscape.js 在循环中创建时所有节点都在彼此之上
Cytoscape.js all nodes are on top of each other when created in a loop
我正在显示一个流程图,其中包含 JSON 文件中的值。
当我以静态方式创建元素时,如下所示:
elements: {
nodes: [
{ data: { id: 'INIT' } },
{ data: { id: 'BUSINESS_RULES_1' } },
{ data: { id: 'EXPORT_STC' } },
{ data: { id: 'EXPORT_SPEC' } },
{ data: { id: 'COPY' } },
{ data: { id: 'MERGE' } },
{ data: { id: 'BUSINESS_RULES_2' } },
{ data: { id: 'TRANSFORM_ARP' } },
{ data: { id: 'TRANSFORM_APS' } },
{ data: { id: 'PUBLISH_APS' } },
{ data: { id: 'PUBLISH_ARP' } },
{ data: { id: 'ARCHIVE' } }
],
edges: [
{ data: { source: 'INIT', target: 'BUSINESS_RULES_1' } },
{ data: { source: 'BUSINESS_RULES_1', target: 'EXPORT_SPEC' } },
{ data: { source: 'BUSINESS_RULES_1', target: 'EXPORT_STC' } },
{ data: { source: 'EXPORT_STC', target: 'COPY' } },
{ data: { source: 'EXPORT_SPEC', target: 'COPY' } },
{ data: { source: 'COPY', target: 'MERGE' } },
{ data: { source: 'MERGE', target: 'BUSINESS_RULES_2' } },
{ data: { source: 'BUSINESS_RULES_2', target: 'TRANSFORM_APS' } },
{ data: { source: 'BUSINESS_RULES_2', target: 'TRANSFORM_ARP' } },
{ data: { source: 'TRANSFORM_ARP', target: 'PUBLISH_ARP' } },
{ data: { source: 'TRANSFORM_APS', target: 'PUBLISH_APS' } },
{ data: { source: 'PUBLISH_APS', target: 'ARCHIVE' } },
{ data: { source: 'PUBLISH_ARP', target: 'ARCHIVE' } }
]
}
如您所见,它显示得很好:
但是当我以动态方式创建元素时,就像这样:
// Fill array with nodes and edges
var arrayNodesAndEdges = [];
for (var i = 0; i < myJSONdata.length; i++) {
if(i < myJSONdata.length - 1 && (myJSONdata[i].OPERATION_NAME != myJSONdata[i+1].OPERATION_NAME)) {
console.log(i + " " +myJSONdata[i].OPERATION_NAME);
arrayNodesAndEdges.push({
group: "nodes",
data: {
id: myJSONdata[i].OPERATION_NAME
}
});
} else if(i == myJSONdata.length - 1) {
console.log(i + " " +myJSONdata[i].OPERATION_NAME);
arrayNodesAndEdges.push({
group: "nodes",
data: {
id: myJSONdata[i].OPERATION_NAME
}
});
}
}
for (var i = 0; i < myJSONdata.length; i++) {
var source = myJSONdata[i].OPERATION_NAME;
if(myJSONdata[i].NEXT_OPERATION_NAME !== "" && myJSONdata[i].NEXT_OPERATION_NAME !== null) {
console.log("Source: " + myJSONdata[i].OPERATION_NAME + ", " + "Target: " +myJSONdata[i].NEXT_OPERATION_NAME);
arrayNodesAndEdges.push({
group: "edges",
data: {
id: "e"+i,
source: source,
target: myJSONdata[i].NEXT_OPERATION_NAME
}
});
}
}
cy.add(arrayNodesAndEdges);
显示不好,所有节点都在彼此的顶部,如您所见:
(我移动了一些来解释它们是如何定位的,但它们都在彼此之上)
这是控制台日志,您可以看到这是静态或动态方式的相同结构:
NODES
0 INIT
2 BUSINESS_RULES_1
3 EXPORT_STC
4 EXPORT_SPEC
5 COPY
6 MERGE
8 BUSINESS_RULES_2
9 TRANSFORM_ARP
10 TRANSFORM_APS
11 PUBLISH_APS
12 PUBLISH_ARP
13 ARCHIVE
EDGES
Source: INIT, Target: BUSINESS_RULES_1
Source: BUSINESS_RULES_1, Target: EXPORT_SPEC
Source: BUSINESS_RULES_1, Target: EXPORT_STC
Source: EXPORT_STC, Target: COPY
Source: EXPORT_SPEC, Target: COPY
Source: COPY, Target: MERGE
Source: MERGE, Target: BUSINESS_RULES_2
Source: BUSINESS_RULES_2, Target: TRANSFORM_APS
Source: BUSINESS_RULES_2, Target: TRANSFORM_ARP
Source: TRANSFORM_ARP, Target: PUBLISH_ARP
Source: TRANSFORM_APS, Target: PUBLISH_APS
Source: PUBLISH_APS, Target: ARCHIVE
Source: PUBLISH_ARP, Target: ARCHIVE
我不明白我做错了什么?
谢谢
编辑 ----------
这是我的全部代码:
var myJSONdata = data;
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: true,
autounselectify: true,
layout: {
name: 'dagre',
rankDir: 'LR' // 'TB' for top to bottom flow, 'LR' for left to right. default is undefined, making it plot top-bottom
},
style: [
{
selector: 'node',
style: {
'content': 'data(id)',
'width': 200,
'height': 50,
'text-opacity': 1,
'text-valign': 'center',
'text-halign': 'center',
'shape': 'square',
'label': 'data(id)',
'background-color': '#11479e',
'color': 'white'
}
},
{
selector: 'edge',
style: {
'width': 7,
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle',
'curve-style': 'bezier',
'line-color': '#9dbaea'
}
},
{
selector: ':selected',
style: {
'background-color': 'yellow',
'line-color': 'yellow',
'target-arrow-color': 'yellow',
'source-arrow-color': 'yellow',
}
}
]
/*,elements: {
nodes: [
{ data: { id: 'INIT' } },
{ data: { id: 'BUSINESS_RULES_1' } },
{ data: { id: 'EXPORT_STC' } },
{ data: { id: 'EXPORT_SPEC' } },
{ data: { id: 'COPY' } },
{ data: { id: 'MERGE' } },
{ data: { id: 'BUSINESS_RULES_2' } },
{ data: { id: 'TRANSFORM_ARP' } },
{ data: { id: 'TRANSFORM_APS' } },
{ data: { id: 'PUBLISH_APS' } },
{ data: { id: 'PUBLISH_ARP' } },
{ data: { id: 'ARCHIVE' } }
],
edges: [
{ data: { source: 'INIT', target: 'BUSINESS_RULES_1' } },
{ data: { source: 'BUSINESS_RULES_1', target: 'EXPORT_SPEC' } },
{ data: { source: 'BUSINESS_RULES_1', target: 'EXPORT_STC' } },
{ data: { source: 'EXPORT_STC', target: 'COPY' } },
{ data: { source: 'EXPORT_SPEC', target: 'COPY' } },
{ data: { source: 'COPY', target: 'MERGE' } },
{ data: { source: 'MERGE', target: 'BUSINESS_RULES_2' } },
{ data: { source: 'BUSINESS_RULES_2', target: 'TRANSFORM_APS' } },
{ data: { source: 'BUSINESS_RULES_2', target: 'TRANSFORM_ARP' } },
{ data: { source: 'TRANSFORM_ARP', target: 'PUBLISH_ARP' } },
{ data: { source: 'TRANSFORM_APS', target: 'PUBLISH_APS' } },
{ data: { source: 'PUBLISH_APS', target: 'ARCHIVE' } },
{ data: { source: 'PUBLISH_ARP', target: 'ARCHIVE' } }
]
}*/
});
// Fill array with nodes and edges
var arrayNodesAndEdges = [];
for (var i = 0; i < myJSONdata.length; i++) {
if(i < myJSONdata.length - 1 && (myJSONdata[i].OPERATION_NAME != myJSONdata[i+1].OPERATION_NAME)) {
console.log(i + " " +myJSONdata[i].OPERATION_NAME);
arrayNodesAndEdges.push({
group: "nodes",
data: {
id: myJSONdata[i].OPERATION_NAME
}
});
} else if(i == myJSONdata.length - 1) {
console.log(i + " " +myJSONdata[i].OPERATION_NAME);
arrayNodesAndEdges.push({
group: "nodes",
data: {
id: myJSONdata[i].OPERATION_NAME
}
});
}
}
for (var i = 0; i < myJSONdata.length; i++) {
var source = myJSONdata[i].OPERATION_NAME;
if(myJSONdata[i].NEXT_OPERATION_NAME !== "" && myJSONdata[i].NEXT_OPERATION_NAME !== null) {
console.log("Source: " + myJSONdata[i].OPERATION_NAME + ", " + "Target: " +myJSONdata[i].NEXT_OPERATION_NAME);
arrayNodesAndEdges.push({
group: "edges",
data: {
id: "e"+i,
source: source,
target: myJSONdata[i].NEXT_OPERATION_NAME
}
});
}
}
cy.add(arrayNodesAndEdges);
多亏了这个post才终于解决了here
我在开头创建了数组并将它们添加到 "element" 属性。但是我还是不知道为什么在以前的版本中不能用。
这是我的最终代码:
var myJSONdata = data;
// Fill array with nodes and edges
var arrayNodes = [];
for (var i = 0; i < myJSONdata.length; i++) {
if(i < myJSONdata.length - 1 && (myJSONdata[i].OPERATION_NAME != myJSONdata[i+1].OPERATION_NAME)) {
console.log(i + " " +myJSONdata[i].OPERATION_NAME);
arrayNodes.push({
group: "nodes",
data: {
id: myJSONdata[i].OPERATION_NAME
}
});
} else if(i == myJSONdata.length - 1) {
console.log(i + " " +myJSONdata[i].OPERATION_NAME);
arrayNodes.push({
group: "nodes",
data: {
id: myJSONdata[i].OPERATION_NAME
}
});
}
}
var arrayEdges = [];
for (var i = 0; i < myJSONdata.length; i++) {
var source = myJSONdata[i].OPERATION_NAME;
if(myJSONdata[i].NEXT_OPERATION_NAME !== "" && myJSONdata[i].NEXT_OPERATION_NAME !== null) {
console.log("Source: " + myJSONdata[i].OPERATION_NAME + ", " + "Target: " +myJSONdata[i].NEXT_OPERATION_NAME);
arrayEdges.push({
group: "edges",
data: {
id: "e"+i,
source: source,
target: myJSONdata[i].NEXT_OPERATION_NAME
}
});
}
}
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: true,
autounselectify: true,
layout: {
name: 'dagre',
rankDir: 'LR' // 'TB' for top to bottom flow, 'LR' for left to right. default is undefined, making it plot top-bottom
},
style: [
{
selector: 'node',
style: {
'content': 'data(id)',
'width': 200,
'height': 50,
'text-opacity': 1,
'text-valign': 'center',
'text-halign': 'center',
'shape': 'square',
'label': 'data(id)',
'background-color': '#11479e',
'color': 'white'
}
},
{
selector: 'edge',
style: {
'width': 7,
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle',
'curve-style': 'bezier',
'line-color': '#9dbaea'
}
},
{
selector: ':selected',
style: {
'background-color': 'yellow',
'line-color': 'yellow',
'target-arrow-color': 'yellow',
'source-arrow-color': 'yellow',
}
}
]
,elements: {
nodes: arrayNodes,
edges: arrayEdges
}
});
我正在显示一个流程图,其中包含 JSON 文件中的值。
当我以静态方式创建元素时,如下所示:
elements: {
nodes: [
{ data: { id: 'INIT' } },
{ data: { id: 'BUSINESS_RULES_1' } },
{ data: { id: 'EXPORT_STC' } },
{ data: { id: 'EXPORT_SPEC' } },
{ data: { id: 'COPY' } },
{ data: { id: 'MERGE' } },
{ data: { id: 'BUSINESS_RULES_2' } },
{ data: { id: 'TRANSFORM_ARP' } },
{ data: { id: 'TRANSFORM_APS' } },
{ data: { id: 'PUBLISH_APS' } },
{ data: { id: 'PUBLISH_ARP' } },
{ data: { id: 'ARCHIVE' } }
],
edges: [
{ data: { source: 'INIT', target: 'BUSINESS_RULES_1' } },
{ data: { source: 'BUSINESS_RULES_1', target: 'EXPORT_SPEC' } },
{ data: { source: 'BUSINESS_RULES_1', target: 'EXPORT_STC' } },
{ data: { source: 'EXPORT_STC', target: 'COPY' } },
{ data: { source: 'EXPORT_SPEC', target: 'COPY' } },
{ data: { source: 'COPY', target: 'MERGE' } },
{ data: { source: 'MERGE', target: 'BUSINESS_RULES_2' } },
{ data: { source: 'BUSINESS_RULES_2', target: 'TRANSFORM_APS' } },
{ data: { source: 'BUSINESS_RULES_2', target: 'TRANSFORM_ARP' } },
{ data: { source: 'TRANSFORM_ARP', target: 'PUBLISH_ARP' } },
{ data: { source: 'TRANSFORM_APS', target: 'PUBLISH_APS' } },
{ data: { source: 'PUBLISH_APS', target: 'ARCHIVE' } },
{ data: { source: 'PUBLISH_ARP', target: 'ARCHIVE' } }
]
}
如您所见,它显示得很好:
但是当我以动态方式创建元素时,就像这样:
// Fill array with nodes and edges
var arrayNodesAndEdges = [];
for (var i = 0; i < myJSONdata.length; i++) {
if(i < myJSONdata.length - 1 && (myJSONdata[i].OPERATION_NAME != myJSONdata[i+1].OPERATION_NAME)) {
console.log(i + " " +myJSONdata[i].OPERATION_NAME);
arrayNodesAndEdges.push({
group: "nodes",
data: {
id: myJSONdata[i].OPERATION_NAME
}
});
} else if(i == myJSONdata.length - 1) {
console.log(i + " " +myJSONdata[i].OPERATION_NAME);
arrayNodesAndEdges.push({
group: "nodes",
data: {
id: myJSONdata[i].OPERATION_NAME
}
});
}
}
for (var i = 0; i < myJSONdata.length; i++) {
var source = myJSONdata[i].OPERATION_NAME;
if(myJSONdata[i].NEXT_OPERATION_NAME !== "" && myJSONdata[i].NEXT_OPERATION_NAME !== null) {
console.log("Source: " + myJSONdata[i].OPERATION_NAME + ", " + "Target: " +myJSONdata[i].NEXT_OPERATION_NAME);
arrayNodesAndEdges.push({
group: "edges",
data: {
id: "e"+i,
source: source,
target: myJSONdata[i].NEXT_OPERATION_NAME
}
});
}
}
cy.add(arrayNodesAndEdges);
显示不好,所有节点都在彼此的顶部,如您所见:
(我移动了一些来解释它们是如何定位的,但它们都在彼此之上)
这是控制台日志,您可以看到这是静态或动态方式的相同结构:
NODES
0 INIT
2 BUSINESS_RULES_1
3 EXPORT_STC
4 EXPORT_SPEC
5 COPY
6 MERGE
8 BUSINESS_RULES_2
9 TRANSFORM_ARP
10 TRANSFORM_APS
11 PUBLISH_APS
12 PUBLISH_ARP
13 ARCHIVE
EDGES
Source: INIT, Target: BUSINESS_RULES_1
Source: BUSINESS_RULES_1, Target: EXPORT_SPEC
Source: BUSINESS_RULES_1, Target: EXPORT_STC
Source: EXPORT_STC, Target: COPY
Source: EXPORT_SPEC, Target: COPY
Source: COPY, Target: MERGE
Source: MERGE, Target: BUSINESS_RULES_2
Source: BUSINESS_RULES_2, Target: TRANSFORM_APS
Source: BUSINESS_RULES_2, Target: TRANSFORM_ARP
Source: TRANSFORM_ARP, Target: PUBLISH_ARP
Source: TRANSFORM_APS, Target: PUBLISH_APS
Source: PUBLISH_APS, Target: ARCHIVE
Source: PUBLISH_ARP, Target: ARCHIVE
我不明白我做错了什么? 谢谢
编辑 ---------- 这是我的全部代码:
var myJSONdata = data;
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: true,
autounselectify: true,
layout: {
name: 'dagre',
rankDir: 'LR' // 'TB' for top to bottom flow, 'LR' for left to right. default is undefined, making it plot top-bottom
},
style: [
{
selector: 'node',
style: {
'content': 'data(id)',
'width': 200,
'height': 50,
'text-opacity': 1,
'text-valign': 'center',
'text-halign': 'center',
'shape': 'square',
'label': 'data(id)',
'background-color': '#11479e',
'color': 'white'
}
},
{
selector: 'edge',
style: {
'width': 7,
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle',
'curve-style': 'bezier',
'line-color': '#9dbaea'
}
},
{
selector: ':selected',
style: {
'background-color': 'yellow',
'line-color': 'yellow',
'target-arrow-color': 'yellow',
'source-arrow-color': 'yellow',
}
}
]
/*,elements: {
nodes: [
{ data: { id: 'INIT' } },
{ data: { id: 'BUSINESS_RULES_1' } },
{ data: { id: 'EXPORT_STC' } },
{ data: { id: 'EXPORT_SPEC' } },
{ data: { id: 'COPY' } },
{ data: { id: 'MERGE' } },
{ data: { id: 'BUSINESS_RULES_2' } },
{ data: { id: 'TRANSFORM_ARP' } },
{ data: { id: 'TRANSFORM_APS' } },
{ data: { id: 'PUBLISH_APS' } },
{ data: { id: 'PUBLISH_ARP' } },
{ data: { id: 'ARCHIVE' } }
],
edges: [
{ data: { source: 'INIT', target: 'BUSINESS_RULES_1' } },
{ data: { source: 'BUSINESS_RULES_1', target: 'EXPORT_SPEC' } },
{ data: { source: 'BUSINESS_RULES_1', target: 'EXPORT_STC' } },
{ data: { source: 'EXPORT_STC', target: 'COPY' } },
{ data: { source: 'EXPORT_SPEC', target: 'COPY' } },
{ data: { source: 'COPY', target: 'MERGE' } },
{ data: { source: 'MERGE', target: 'BUSINESS_RULES_2' } },
{ data: { source: 'BUSINESS_RULES_2', target: 'TRANSFORM_APS' } },
{ data: { source: 'BUSINESS_RULES_2', target: 'TRANSFORM_ARP' } },
{ data: { source: 'TRANSFORM_ARP', target: 'PUBLISH_ARP' } },
{ data: { source: 'TRANSFORM_APS', target: 'PUBLISH_APS' } },
{ data: { source: 'PUBLISH_APS', target: 'ARCHIVE' } },
{ data: { source: 'PUBLISH_ARP', target: 'ARCHIVE' } }
]
}*/
});
// Fill array with nodes and edges
var arrayNodesAndEdges = [];
for (var i = 0; i < myJSONdata.length; i++) {
if(i < myJSONdata.length - 1 && (myJSONdata[i].OPERATION_NAME != myJSONdata[i+1].OPERATION_NAME)) {
console.log(i + " " +myJSONdata[i].OPERATION_NAME);
arrayNodesAndEdges.push({
group: "nodes",
data: {
id: myJSONdata[i].OPERATION_NAME
}
});
} else if(i == myJSONdata.length - 1) {
console.log(i + " " +myJSONdata[i].OPERATION_NAME);
arrayNodesAndEdges.push({
group: "nodes",
data: {
id: myJSONdata[i].OPERATION_NAME
}
});
}
}
for (var i = 0; i < myJSONdata.length; i++) {
var source = myJSONdata[i].OPERATION_NAME;
if(myJSONdata[i].NEXT_OPERATION_NAME !== "" && myJSONdata[i].NEXT_OPERATION_NAME !== null) {
console.log("Source: " + myJSONdata[i].OPERATION_NAME + ", " + "Target: " +myJSONdata[i].NEXT_OPERATION_NAME);
arrayNodesAndEdges.push({
group: "edges",
data: {
id: "e"+i,
source: source,
target: myJSONdata[i].NEXT_OPERATION_NAME
}
});
}
}
cy.add(arrayNodesAndEdges);
多亏了这个post才终于解决了here 我在开头创建了数组并将它们添加到 "element" 属性。但是我还是不知道为什么在以前的版本中不能用。
这是我的最终代码:
var myJSONdata = data;
// Fill array with nodes and edges
var arrayNodes = [];
for (var i = 0; i < myJSONdata.length; i++) {
if(i < myJSONdata.length - 1 && (myJSONdata[i].OPERATION_NAME != myJSONdata[i+1].OPERATION_NAME)) {
console.log(i + " " +myJSONdata[i].OPERATION_NAME);
arrayNodes.push({
group: "nodes",
data: {
id: myJSONdata[i].OPERATION_NAME
}
});
} else if(i == myJSONdata.length - 1) {
console.log(i + " " +myJSONdata[i].OPERATION_NAME);
arrayNodes.push({
group: "nodes",
data: {
id: myJSONdata[i].OPERATION_NAME
}
});
}
}
var arrayEdges = [];
for (var i = 0; i < myJSONdata.length; i++) {
var source = myJSONdata[i].OPERATION_NAME;
if(myJSONdata[i].NEXT_OPERATION_NAME !== "" && myJSONdata[i].NEXT_OPERATION_NAME !== null) {
console.log("Source: " + myJSONdata[i].OPERATION_NAME + ", " + "Target: " +myJSONdata[i].NEXT_OPERATION_NAME);
arrayEdges.push({
group: "edges",
data: {
id: "e"+i,
source: source,
target: myJSONdata[i].NEXT_OPERATION_NAME
}
});
}
}
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: true,
autounselectify: true,
layout: {
name: 'dagre',
rankDir: 'LR' // 'TB' for top to bottom flow, 'LR' for left to right. default is undefined, making it plot top-bottom
},
style: [
{
selector: 'node',
style: {
'content': 'data(id)',
'width': 200,
'height': 50,
'text-opacity': 1,
'text-valign': 'center',
'text-halign': 'center',
'shape': 'square',
'label': 'data(id)',
'background-color': '#11479e',
'color': 'white'
}
},
{
selector: 'edge',
style: {
'width': 7,
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle',
'curve-style': 'bezier',
'line-color': '#9dbaea'
}
},
{
selector: ':selected',
style: {
'background-color': 'yellow',
'line-color': 'yellow',
'target-arrow-color': 'yellow',
'source-arrow-color': 'yellow',
}
}
]
,elements: {
nodes: arrayNodes,
edges: arrayEdges
}
});