중복이없는 cytoscape로 그래프 만들기

Question

노드가 겹칠 수있는 그래프를 표시하기 위해 cytoscape를 사용합니다. 나는 각 노드의 위치 y를 바꾸지 않고 이것을 피하고 싶다. 레벨을 관리하기 위해 노드의 위치 y를 사용하지만 위치 x는 문제없이 변경할 수 있습니다.

     $.getJSON("/stratifiant/cytoscape", function(data) { 
      var cy = cytoscape({ 
       container: document.getElementById('container'), 
       elements: data, 
       style: [{ 
        selector: 'node', 
        style: { 
         shape: 'rectangle', 
         'background-color': 'red', 
         label: 'data(label)' 
        } 
       }] 
      }); 
     }); 

JSON :

내가하는 옵션 cytoscape와 함께 사용해야 레이아웃

    { 
     "nodes" : [ { 
     "data" : { 
      "x" : 0, 
      "y" : 0, 
      "id" : "120510", 
      "label" : "SOG.1006" 
     } 
     }, { 
     "data" : { 
      "x" : 100, 
      "y" : 0, 
      "id" : "120487", 
      "label" : "SOG.1005" 
     } 
     }, { 
     "data" : { 
      "x" : 200, 
      "y" : 0, 
      "id" : "120188", 
      "label" : "SOG.1002" 
     } 
     }, { 
     "data" : { 
      "x" : 300, 
      "y" : 0, 
      "id" : "120189", 
      "label" : "SOG.1003" 
     } 
     }, { 
     "data" : { 
      "x" : 400, 
      "y" : 0, 
      "id" : "120537", 
      "label" : "SOG.1008" 
     } 
     }, { 
     "data" : { 
      "x" : 0, 
      "y" : 100, 
      "id" : "120179", 
      "label" : "SOG.1000" 
     } 
     }, { 
     "data" : { 
      "x" : 100, 
      "y" : 100, 
      "id" : "120187", 
      "label" : "SOG.1001" 
     } 
     }, { 
     "data" : { 
      "x" : 0, 
      "y" : 200, 
      "id" : "120536", 
      "label" : "SOG.1007" 
     } 
     }, { 
     "data" : { 
      "x" : 100, 
      "y" : 200, 
      "id" : "120190", 
      "label" : "SOG.1004" 
     } 
     } ], 
     "edges" : [ { 
     "data" : { 
      "id" : "s120510-120487", 
      "source" : "120510", 
      "target" : "120487" 
     } 
     }, { 
     "data" : { 
      "id" : "a120179-120188", 
      "source" : "120179", 
      "target" : "120188" 
     } 
     }, { 
     "data" : { 
      "id" : "s120179-120187", 
      "source" : "120179", 
      "target" : "120187" 
     } 
     }, { 
     "data" : { 
      "id" : "a120536-120187", 
      "source" : "120190", 
      "target" : "120187" 
     } 
     }, { 
     "data" : { 
      "id" : "s120536-120190", 
      "source" : "120536", 
      "target" : "120190" 
     } 
     } ] 
    } 

?

Answer 1

레이아웃을 사용할 수 있으므로 각 노드의 특정 위치를 설정하지 않아도됩니다. 내 추천은 dagre 또는 breadthfirst 레이아웃입니다.

$.getJSON("/stratifiant/cytoscape", function(data) { 
     var cy = cytoscape({ 
      container: document.getElementById('container'), 
      elements: data, 
      layout:{ 
       name:'dagre', 
      }, 
      style: [{ 
       selector: 'node', 
       style: { 
        shape: 'rectangle', 
        'background-color': 'red', 
        label: 'data(label)' 
       } 
      }] 
     }); 
    });