时间戳

首页 > 解决方案 > Cytoscape.js 在循环中创建时，所有节点都在彼此之上

javascript - Cytoscape.js 在循环中创建时，所有节点都在彼此之上

问题描述

我正在显示一个流程图，其中包含来自 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);

标签： javascriptcytoscape.jscytoscape

解决方案

多亏了这篇文章，我终于设法解决了这个问题，我 在开始时创建了数组并将它们添加到“元素”属性中。但我仍然不知道为什么它在以前的版本中不起作用。

这是我的最终代码：

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
    }
});

推荐阅读