ant design에서 나온 데이터 시각화 라이브러리 antv?! g6.Graph 사용기

https://antv.vision/en

AntV

antd design 요긴하게 잘 쓰고 있었는데, 새로 업데이트 되면서 antv라는 엄청난 라이브러리가 나왔다!

들어가서 구경해보면 세상 모든 차트들이 다있다... 웬만한 데이터 시각화는 전부 커버할 수 있을 것 같다....

antd 특성상 docs가 너무 친절해서 대부분 docs만 보면 바로 구현할 수 있다. 

편하고 현란한 많은 차트들 중에 G6에 있는 Graph를 사용해봤다. 

antv 사용 꿀팁

manual, API 등 다른 메뉴들이 많지만 Example에서 보고 내가 쓰고 싶은 것과 가장 가까운 차트를 찾는게 가장 편하다.

antv-g6에서 예시만 모아둔곳 : https://antv-g6.gitee.io/en/examples/gallery

g6만 해도 차트가 오만가지라 인터넷 쇼핑하듯이 고르면 된다. 

상상하는 거의 대부분의 세부 조정, 커스텀이 가능하다. 원하는게 있다면 계~속 찾아보면 나온다 ㅎㅎ 

g6.Graph basic 사용하기

여러 가지 예시 그래프들을 찾아서 내가 원하는 그래프를 완성했다.

• 그래프 기본 사용 참고 : https://antv-g6.gitee.io/en/examples/net/forceDirected#basicFA2
• 간선 커스텀 : https://g6.antv.vision/en/examples/item/arrows/#built-in-arrows

필요한 데이터 형태

모든 g6.Graph에서 필요한 데이터 형태는 동일하다 

const data = {
  nodes: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }, { id: '5' }, { id: '6' }],
  edges: [
    {
      source: '1',
      target: '2',
      label: 5000,
    },
    {
      source: '2',
      target: '3',
      label: 6000,
    },
    {
      source: '3',
      target: '4',
      label: 5000,
    },
    {
      source: '4',
      target: '5',
      label: 1991,
    },
    {
      source: '5',
      target: '6',
      label: 3501,
    },
    {
      source: '6',
      target: '3',
      label: 3501,
      style: {...} // style object를 지정해서 해당 간선만의 스타일 조정도 가능함
    },
  ],
};
​

그래프 그리기

주의 : docs에서는 dom에 직접 접근해서 getElementById로 가져온 container를 사용한다. 이 부분은 react를 사용하고 있으므로 useRef로 대체한다. 

const refTest = useRef();
 
const graph = new G6.Graph({
  container: refTest.current, //HTMLElement
  width: 600,
  height: 500,
  modes: {
    default: ['zoom-canvas', 'drag-canvas', 'drag-node'], // 여기서 캔버스에 대한 설정을 조정할 수 있음
  },
  layout: {
    type: 'forceAtlas2',
    preventOverlap: true,
    kr: 10,
    center: [250, 250],
  },
 
  // Node 스타일 지정
  defaultNode: {
    size: 20,
  },
 
  // Edge 스타일 지정
  defaultEdge: {
    size: 1,
    color: 'black',
    style: {
      endArrow: {
        path: 'M, 0, 0, L, 8, 4, L, 8, -4, Z',
        fill: '#e2e2e2',
      },
    },
  },
});
 
// node 라벨 지정 
data.nodes.forEach((node) => {
  node.label = node.id;
});

graph.on('afterlayout', (e) => {
  graph.fitView();
});
graph.data(data);
graph.render();

결과

나는 아주 간단하게 만들었지만 드래그, 애니메이션 등등 활용할 수 있는 기능이 엄청나게 많다 

구석구석 찾아서 잘 활용하길 :)