DC.js-개념

DC.js는 대부분의 프런트 엔드 개발자에게 간단하고 쉽습니다. D3.js에 대한 지식이 없어도 기본 차트를 빠르게 작성할 수 있습니다. 이전에는 DC.js를 사용하여 시각화를 만들기 시작했습니다. 웹 표준에 익숙해 져야합니다. 다음 웹 표준은 차트 렌더링을위한 DC.js의 기반 인 D3.js에서 많이 사용됩니다.

HTML (Hypertext Markup Language)
DOM (문서 개체 모델)
CSS (Cascading Style Sheet)

이러한 각 웹 표준을 자세히 이해하겠습니다.

HTML (Hypertext Markup Language)

아시다시피 HTML은 웹 페이지의 콘텐츠를 구성하는 데 사용됩니다. 확장자가 ".html"인 텍스트 파일로 저장됩니다.

일반적인 기본 HTML 예제는 다음과 같습니다.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title></title>
   </head>
   
   <body>

   </body>
</html>

DOM (문서 개체 모델)

브라우저에서 HTML 페이지를로드하면 계층 구조로 변환됩니다. HTML의 모든 태그는 부모-자식 계층 구조를 가진 DOM의 요소 / 객체로 변환됩니다. HTML을보다 논리적으로 구성합니다. DOM이 형성되면 페이지의 요소를 조작 (추가 / 수정 / 제거)하기가 더 쉬워집니다.

다음 HTML 문서를 사용하여 DOM을 이해합시다.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>My Document</title>
   </head>

   <body>
      <div>
         <h1>Greeting</h1>
         <p>Hello World!</p>
      </div>
   </body>
</html>

위 HTML 문서의 문서 객체 모델은 다음과 같습니다.

CSS (Cascading Style Sheet)

HTML은 웹 페이지에 구조를 제공하지만 CSS 스타일은 웹 페이지를보다보기 편하게 만듭니다. CSS는 HTML 또는 XML (SVG 또는 XHTML과 같은 XML 방언 포함)로 작성된 문서의 표현을 설명하는 데 사용되는 스타일 시트 언어입니다. CSS는 웹 페이지에서 요소를 렌더링하는 방법을 설명합니다.

자바 스크립트

JavaScript는 사용자의 브라우저에서 실행되는 느슨한 유형의 클라이언트 측 스크립팅 언어입니다. JavaScript는 웹 사용자 인터페이스를 대화 형으로 만들기 위해 html 요소 (DOM 요소)와 상호 작용합니다. JavaScript는 ECMAScript 표준을 기반으로하지 않는 ECMA-262 사양에 기반한 핵심 기능과 기타 기능을 포함하는 ECMAScript 표준을 구현합니다. JavaScript 지식은 DC.js의 전제 조건입니다.

구성품

DC.js는 두 개의 우수한 JavaScript 라이브러리를 기반으로합니다.

Crossfilter
D3.js

크로스 필터

Crossfilter는 브라우저에서 대규모 다 변수 데이터 세트를 탐색하기위한 자바 스크립트 라이브러리입니다. 수만 또는 수십만 행의 원시 데이터를 매우 빠르게 그룹화, 필터링 및 집계하는 데 사용됩니다.

D3.js

D3.js는 데이터 기반 문서를 의미합니다. D3.js는 데이터를 기반으로 문서를 조작하기위한 JavaScript 라이브러리입니다. D3는 동적, 대화 형, 온라인 데이터 시각화 프레임 워크이며 많은 웹 사이트에서 사용됩니다. D3.js는Mike Bostock라는 이전 시각화 툴킷의 후속으로 생성되었습니다. Protovis. D3.js는 수십만 개의 웹 사이트에서 사용됩니다.