BaeBox

모름지기 커스텀의 매력은 내 맘대로 하고 싶은대로 할 수 있다는 것이다. D3는 능력만 된다면, 엄청난 자유도를 제공한다. 근데 그럴 능력이...? 이번엔 쉽고 요상한거 하나 만들어보자. 대부분의 차트에서는 series 기능을 제공하는데, 대개 한가지 형태의 차트만으로 series 기능을 제공하거나, 시리즈마다 다른 데이터를 이용해 차트를 그리는 것이 불가능하다. 우린 그게 되는걸 만들어 볼 것이다. 근데 이거 하고 나면 다른데서 왜 굳이 이 방식을 안 쓰는지 알 수 있다. 하하하 게다가 귀찮으니까 대충 만들거다. 커스텀은 알아서들 하시라 하하하. 기본적으로 직교좌표 형태를 따르는 두 차트이기 때문에 앞선 글에서 설명했던 것과 구조는 동일하다. 사실 x축이나 y축을 그리는 것은 선택사항이지만... 있는게..

D3 차트는 어려울 것 같지만 굉장히 단순한 구조를 가지고 있다. 물론 이를 이용해 뭔가 만드려면 고되지만, 그 구조만 이해하는 건 매우 간단하다. 딱 봐도 직교(데카르트/카티시언)좌표를 이용하는게 눈에 보이는데 구성 요소도 마찬가지다! 세부적으로 각각의 요소들은 위에 붉은 색으로 표시된(선언 x) xAxis, yAxis, data, line 등을 통해 설정이 가능하다. D3 차트를 이용하여 기본형의 차트를 그리는 작업은 기본적으로 위의 변수들을 지정하는 과정이라고 봐도 무방하...지 않을까? 내 개인적으로는 그렇게 생각한다.

Selection D3는 자체적인 Selection(선택) API를 제공한다. 해당 기능을 이용해 DOM Element를 가져올 수 있다. querySelector, getElementBy... 와 유사하지만, Element 자체를 그냥 가져오는 것이 아닌 D3 Object로 wrapping(감싸서) 가져온다. jQuery와 거의 유사하다고 생각하면 편하다. Dynamic Properties DOM element의 속성(property, attribute) 등을 동적으로 변경이 가능하다. Enter and Exit 필요한 노드와 불필요한 노드를 간편하게 처리 가능하다. 이미 속성을 동적으로 변경 가능하다는 점에서 사용자가 알아서 처리하면 되는데... 이건 편의성 기능이지 특징이라고 하기엔 좀... 그런거..

D3.js(Data-Driven Documents) : 웹브라우저 상에서 동적이고 인터렉티브한 정보시각화를 구현하기 위한 자바스크립트 라이브러리.