DC.js-D3.js 소개

D3.js는 브라우저에서 대화 형 시각화를 만드는 데 사용되는 JavaScript 라이브러리입니다. D3 라이브러리를 사용하면 데이터 세트 컨텍스트에서 웹 페이지의 요소를 조작 할 수 있습니다. 이러한 요소는 HTML, SVG 또는 Canvas 요소 일 수 있으며 데이터 세트의 내용에 따라 도입, 제거 또는 편집 할 수 있습니다. DOM 객체를 조작하기위한 라이브러리입니다. D3.js는 데이터 탐색에 유용한 도구가 될 수 있습니다. 데이터 표현을 제어하고 데이터 상호 작용을 추가 할 수 있습니다.

D3.js는 다른 라이브러리와 비교할 때 최고의 프레임 워크 중 하나입니다. 이 때문입니다; 웹 및 데이터 시각화에서 작동하며 엔터프라이즈 급입니다. 또 다른 이유는 전 세계 개발자가 많은 고급 차트를 만들 수있는 뛰어난 유연성 때문입니다. 또한 기능을 크게 확장했습니다.

다음과 같은 D3.js의 기본 개념을 이해합시다.

Selections
데이터 결합
SVG
Transition
Animation
D3.js API

이러한 각 개념을 자세히 이해합시다.

선택

선택은 D3.js의 핵심 개념 중 하나입니다. CSS 선택기 개념을 기반으로합니다. 이미 JQuery를 사용하고 알고있는 사람들은 선택 사항을 쉽게 이해할 수 있습니다. CSS 선택자를 기반으로 DOM을 선택한 다음 DOM 요소를 수정하거나 추가 및 제거하는 옵션을 제공 할 수 있습니다.

데이터 결합

데이터 조인은 D3.js의 또 다른 중요한 개념입니다. 선택 항목과 함께 작동하며 데이터 세트 (일련의 숫자 값)와 관련하여 HTML 문서를 조작 할 수 있습니다. 기본적으로 D3.js는 데이터 세트에 가장 높은 우선 순위를 부여하며 데이터 세트의 각 항목은 HTML 요소에 해당합니다.

SVG

SVG는 Scalable Vector Graphics. SVG는 XML 기반 벡터 그래픽 형식입니다. 선, 직사각형, 원, 타원 등과 같은 다양한 모양을 그리는 옵션을 제공합니다. 따라서 SVG로 시각화를 디자인하면 더 많은 힘과 유연성을 얻을 수 있습니다.

변환

SVG는 단일 SVG 모양 요소 또는 SVG 요소 그룹을 변환하는 옵션을 제공합니다. SVG 변환은 Translate, Scale, Rotate 및 Skew를 지원합니다.

전이

전환은 항목의 한 상태에서 다른 상태로 변경하는 프로세스입니다. D3.js는 HTML 페이지에서 전환을 수행하는 transition () 메서드를 제공합니다.

생기

D3.js는 전환을 통해 애니메이션을 지원합니다. 트랜지션을 적절히 사용하여 애니메이션을 수행 할 수 있습니다. 전환은 키 프레임이 두 개 뿐인 제한된 형태의 키 프레임 애니메이션입니다.start 과 end. 시작 키 프레임은 일반적으로 DOM의 현재 상태이고 종료 키 프레임은 사용자가 지정하는 속성, 스타일 및 기타 속성의 집합입니다. 전환은 시작 뷰에 의존하는 복잡한 코드없이 새 뷰로 전환하는 데 적합합니다.

D3.js API

몇 가지 중요한 D3.js API의 메서드를 간략하게 이해하겠습니다.

컬렉션 API

컬렉션은 여러 요소를 하나의 단위로 그룹화하는 단순한 개체입니다. 컨테이너라고도합니다. 여기에는 개체,지도, 세트 및 둥지가 포함됩니다.

Paths API

경로는 직사각형, 원, 타원, 폴리 라인, 다각형, 직선 및 곡선을 그리는 데 사용됩니다. SVG 경로는 획을 긋거나 채우거나 클리핑 경로로 사용하거나이 세 가지를 모두 조합하여 사용할 수있는 모양의 윤곽선을 나타냅니다.

Axis API

D3.js는 축을 그리는 기능을 제공합니다. 축은 선, 눈금 및 레이블로 구성됩니다. 축은 스케일을 사용하므로 각 축에는 작업 할 스케일이 지정되어야합니다.

Zooming API

확대 / 축소는 콘텐츠를 확장하는 데 도움이됩니다. 클릭 앤 드래그 방식을 사용하여 특정 영역에 집중할 수 있습니다.

구분 기호로 구분 된 값 API

구분 기호는 일반 텍스트 또는 기타 데이터에서 개별 독립 영역 간의 경계를 지정하는 데 사용되는 하나 이상의 문자 시퀀스입니다. 필드 구분 기호는 쉼표로 구분 된 값의 시퀀스입니다. 간단히 말해서 구분 기호로 구분 된 값은 CSV (쉼표로 구분 된 값) 또는 TSV (탭으로 구분 된 값)입니다.