작업 방식
AntV G6 Graph는 네트워크, 트리, 계층 구조, 마인드맵 등 노드-엣지 구조의 연결된 데이터를 시각화하는 데 초점을 둡니다. 확인된 스킬은 G6 v5를 대상으로 하며 데이터, 레이아웃, 외형, 동작, 플러그인을 선언형 설정으로 구성합니다. 핵심 질문은 관계 구조를 어떻게 표시하고 탐색하게 할 것인가입니다.
이 항목은 구체적인 v5 마이그레이션 주의사항과 전문 주제를 위한 원격 참조 검색 서비스를 함께 제공합니다. G6를 G2 통계 차트나 X6 다이어그램 편집기와 구분합니다. 노드-엣지 그림은 편집기 캔버스와 비슷해 보일 수 있지만, 기존 네트워크를 보여 주는 일과 사용자가 워크플로를 만들고 저장하게 하는 일은 서로 다른 작업입니다.
예상 산출물
- 제공된 관계 데이터셋에 맞게 설정된 G6 그래프 뷰 JavaScript
- 노드, 엣지, 그룹에 대한 레이아웃 및 시각적 인코딩 선택
- 확대·축소, 드래그, 선택과 같은 명시적인 탐색 동작
브리프에서 검토까지
- 01관계 데이터 검증
각 노드를 고유 ID로 식별하고 엣지의 끝점이 의도한 노드를 가리키는지 확인합니다. 레이블과 시각 속성은 관계 자체와 분리합니다.
- 02뷰 선택
구조에 맞게 포스, 트리, 계층, 방사형 등 적합한 레이아웃을 고릅니다. 설정 세부 사항이 진입 파일 범위를 넘으면 관련 G6 참조를 검색합니다.
- 03G6 v5 설정
기억에 남아 있는 v4 설정을 섞지 말고, 대상 릴리스에 대해 문서화된 데이터, 스타일, 동작, 렌더링 규칙을 사용합니다.
- 04그래프 점검
실제 브라우저 런타임에서 렌더링된 레이블, 엣지 끝점 관계, 레이아웃 가독성, 의도한 인터랙션을 확인합니다. 정돈된 샘플만 보지 말고 밀집되었거나 끊어진 부분도 검토합니다.