sckroll / algetda Goto Github PK

vue-d3-network 라이브러리 사용법을 다시 익히고, 재사용할 수 있도록 컴포넌트화

• 컨트롤 영역에서 그래프의 값을 입력하거나 시각화 영역에서 노드를 생성/수정/삭제할 때마다 그래프의 노드 위치가 원래대로 돌아가는 현상이 있음
• 컨트롤 영역에서 입력할 때에는 상관이 없는데, 시각화 영역에서 조작할 때마다 계속 처음으로 돌아가는 게 문제
• 아마 시각화 영역을 만질 때마다 컨트롤 영역의 값을 변경하고, 그게 다시 시각화 영역을 건드리기 때문이라고 추측됨

▲ 처음에 노드를 클릭했을 때 (정상)

▲ 노드 클릭 후 간선을 클릭했을 때 (비정상)

▲ 처음에 간선을 클릭했을 때 (정상)

▲ 간선 클릭 후 노드를 클릭했을 때 (비정상)

• 머리 노드와 꼬리 노드에 + 아이콘 추가
• 해당 아이콘을 클릭하면 간선을 클릭했을 때 뜨는 툴팁이 나타남
• 그 외 동작은 간선 툴팁과 동일

• 버튼 (Button)
• 입력 창 (Input Box)
• 토글 스위치 (Toggle Switch)
• 팝업 혹은 메시지 창 (Pane)
• 툴팁 (Tooltip)
• 아이콘 (Icon)

• vue-d3-network 라이브러리의 node-click, link-click 이벤트를 사용할 것
  • 참고: https://github.com/emiliorizzo/vue-d3-network#events
• 노드 클릭 시 툴팁 요소
  • 입력 창
  • 적용 버튼
  • 삭제 버튼
• 간선 클릭 시 툴팁 요소
  • 입력 창
  • 추가 버튼

• 한글: Noto Sans KR Spoqa Han Sans Neo
• 영문: Poppins (Google Fonts)

• 공통
  • 헤더 메뉴
  • 드로어 메뉴
  • 설정 팝업
  • 시각화 페이지 상단 컨트롤 영역
• 페이지
  • 랜딩 페이지 (/)
    • 푸터 영역
  • 연결 리스트 (/linked-list)
  • 트리 (/tree)
  • 그래프 (/graph)
  • 힙 (/heap)
  • 기타 (/etc)

• 머리 노드(head)와 꼬리 노드(tail)을 구분
  • 양 끝 노드만 색상 차별화
  • 머리 노드에는 head, 꼬리 노드에는 tail 레이블 추가
    • 노드 툴팁에 머리/꼬리 노드 여부 표시
• 생성 (Create)
  • 초기 값을 문자열 + 쉼표(,)로 입력
  • 랜덤 숫자 값으로 초기화
• 검색 (Search)
  • 특정 값 검색
• 삽입 (Insert)
  • 머리(head)에 특정 값 삽입
  • 꼬리(tail)에 특정 값 삽입
  • 머리와 꼬리를 제외한 특정 인덱스에 특정 값 삽입
• 삭제 (Remove)
  • 머리(head) 노드 삭제
  • 꼬리(tail) 노드 삭제
  • 머리와 꼬리를 제외한 특정 인덱스에 해당하는 노드 삭제
• 동작하는 과정을 순서 단위로 구분해서 표현
  • 자동 재생
  • 순서 단위로 재생 / 역재생