[javascript] Cytoscape.js에서 그래프에 중력을 적용하는 방법은 무엇인가요?

24 Nov 2023

javascript

Cytoscape.js는 JavaScript 기반의 그래프 시각화 라이브러리입니다. 그래프에 중력을 적용하여 노드 간의 이동을 제어하는 기능을 제공합니다.

중력은 Cytoscape.js의 physics 모듈을 사용하여 설정할 수 있습니다. 다음은 중력을 적용하는 간단한 예제 코드입니다.

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

  elements: {
    nodes: [
      { data: { id: 'a' } },
      { data: { id: 'b' } },
      { data: { id: 'c' } }
    ],
    edges: [
      { data: { source: 'a', target: 'b' } },
      { data: { source: 'b', target: 'c' } }
    ]
  },

  layout: {
    name: 'preset'
  },

  style: [
    {
      selector: 'node',
      style: {
        'background-color': 'blue',
        'label': 'data(id)'
      }
    },
    {
      selector: 'edge',
      style: {
        'width': 3,
        'line-color': 'gray',
        'target-arrow-color': 'gray',
        'target-arrow-shape': 'triangle'
      }
    }
  ],

  physics: {
    barnesHut: {
      gravitationalConstant: -2000
    }
  }
});

이 예제에서 physics 객체의 barnesHut 프로퍼티를 사용하여 중력을 설정하고 있습니다. gravitationalConstant 값은 중력의 세기를 결정합니다. 음수 값으로 설정하면 노드 간에 서로 밀려나는 힘을 생성하게 됩니다. 값의 크기에 따라 중력의 세기도 변화합니다.

위 예제 코드를 실행하면 그래프가 그려지고, 중력을 적용하여 노드들이 밀려나고, 그에 따라 그래프의 형태가 변화할 것입니다.

Cytoscape.js 공식 문서에서 더 많은 설정 옵션과 기능을 확인할 수 있습니다. (https://js.cytoscape.org/)