D3 - Introduce
D3
D3
D3는 자바스크립트 기반 라이브러리 로서 데이터 시각화에 주로 쓰입니다. Data-Driven-Document의 약자로서 D3라는 명칭을 사용하고 있습니다. 완전한 오픈소스 라이브러리 입니다.
svg 와 canvas, HTML를 이용해서 DOM 조작을 통해서 데이터 표현을 쉽게 만들어줍니다.
데이터 시각화에 대한 영감을 주는 사이트로서는 아래와 같은 사이트가 있습니다.
The pudding
위와 같은 사이트들의 기반에는 D3를 사용했을 가능성이 많이 있습니다.
우리의 최종 목표는 아래와 같이 React, styled-component, D3, svg 를 사용해서 간단한 LineChart를 만들어 보는 것 입니다.
d3.select && d3 selectAll
위 html 문서를 띄워둔 상태에서 d3 라이브러리가 설치되어 있는 환경입니다. chrome console 이지만 각각의 메소드가 어떤 역할을 하는 지 알아 봅시다.
select나 selectAll 메소드 모두 DOM을 가르키는 역할을 하는데 Selection 이라는 객체를 반환해버립니다. 해당 프로퍼티로서 그룹이 지정되어있는데 _groups 라는 프로퍼티는 select는 가장 빨리 찾아지는 DOM node 1개를 ,selectAll은 모든 DOM node를 찾아 NodeList배열에 담아 반환합니다.
그리고 _parents 속성이 있는데 이둘 모두 숨김 프로퍼티라는 관행적인 네이밍을 하고 있습니다. 이렇게 밑줄을 넣은 이유는 직접적인 접근을 하지 말아달라는 자바스크립트적인 네이밍입니다.
그렇다면 어떻게 이러한 node들에 접근할 수 있나요?
selection.node() && selection.nodes()
위 코드를 보듯이 각각 한개의 노드를 접근하고 싶을때는 node, 여러개의 노드를 접근 하고 싶을 때는 nodes 메소드를 사용합니다.
selection.style()
DOM node를 특정한 selection을 반환받고 style 함수를 사용하면 해당 그룹에 있는DOM들의 속성을 바꿀수 있습니다. 많은 요소들을 반복선택해서 반복 적용하지 않고 한번에 적용이 가능합니다.
selection.styled([css 속성],[값])
그리고 반환을 Selection 타입으로 하기 때문에 체이닝으로 이어서 적용이 가능합니다.
selection.attr()
selection.attr([tag 속성],[값]) : selection
selection.attr([tag 속성]) : 속성의 값 반환
selection.text()
selection.text([해당 태그에 넣을 text]) : selection
selection.text() : 해당 속성의 text 값 반환
selection.classed()
selection.classed([클래스 이름], true) : selection : 해당 요소에 클래스 이름 추가
selection.classed([클래스 이름], false) : selection : 해당 요소에 클래스 이름 제거
각 항목에 대한 callBackfunction
위와 같은 메소드들의 두번째 인수로서 일반적인 값대신 callback 함수를 넣을 수 있습니다. 각 함수들은 반환받은 selection 안의 노드들에 각각 적용됩니다.
이러한 콜백함수의 인수는 특별한 구조를 갖는데 첫번째 인수는 나중에 추후 업데이트를 하겠습니다. 두번째 인수부터 알아보자면
function (_, index){}
위와 같은 구조를 하고 있으며 사용 코드는 아래와 같습니다. 컨벤션 맞추기 귀찮아서 죄송합니다 ㅜ
