Wizard Factory: 분석 : d3.js bar chart with tooltips

아래 분석은 “Let’s Make a Bar Chart, Part 1 2 3“내용을 참조하였다.

example 예제에서 꾸미는 CSS나 속성은 모두 제외하고 데이타가 있을 때 어떻게 bar chart를 만들 것인가 순으로 분석하였다.

Step 1- Loading an external data file in tab-separated values(TSV) format

d3.tsv를 사용하여 데이터를 읽어오고, div tag기준으로 분류하였다. 또한 div의 width를 달리하여 값에 따라 차이가 나도록 하였다.

위의 결과는 html으로 아래와 같이 된다.

d3.select와 append를 사용하여 svg를 dom에 추가하고, selectAll.data를 사용하여 rect 객체를 추가 한다.

scale.ordinal은 공평하게 분류할때 사용한다. 주어진 0~width에서 domain에 들어온 갯수만큼 나누어서 x(d)에 의해서 x값을 주고, x.rangeBand()로 동일한 넓이를 받는다.

scale.linear는 주어진 범위와 domain으로 들어온 최대값을 매핑해서 그 값에 맞는 상대값을 계산하여 반환한다.

아래와 같은 결과가 나오게 된다.

위의 결과는 html으로 아래와 같이 된다.

x,y축을 그리기 위해서 left, bottom에 margin를 넣어야 한다. 실제 예제에서는 top, right 모두 들어가지만 내용의 이해를 돕기 위해서 left, bottom만 넣었다.

svg를 640×480 전체 사이즈를 가지고, scaler들의 최대값을 margin를 뺀 값으로 변경하고, chart라는 object가 left로 translate left해서 실제 그리는 영역으로 사용했다.

d3에서는 축을 그리는 위해서 axis라는 api를 제공한다. 그 중에 orient는 axis(축)을 어디에 둘 것인가 지정하는 것이지만 내부적으로 tick를 그릴때 참고하는 것이지 실제 위치를 찾아주는 것이 아니므로 위치는 직접 잡아주어야 한다.

y축이 헷갈릴 수 있는데, 이유가 값이 일반적으로 우리가 배운 반대인 가장 위가 좌표상으로 0이고, 가장 아래가 가장 크므로 반대로 생각해야 한다.

위의 결과는 html으로 아래와 같이 된다.

html tag를 보면, tick이라는 group에 line과 text element가 추가된 것을 볼 수 있다. path, line, text를 axis가 넣어주는 것이다.

d3-tip은 추가로 lib가 필요로 한다.

사용법은 간단하다.

d3.tip이라는 api로 tip를 생성해서 연결하고자 하는 selector에서 call 하면 된다.

그리고 실제 적용해야 하는 rect object의 mouse event에 연결하면 끝난다.

해보면 각 rect에 event를 붙이고 나서 axes를 추가하면 정상적으로 svg element에 추가 되지 않는데 정확한 이유는 모르겠음.

위의 결과는 html으로 아래와 같이 된다.

위의 full code는 http://ift.tt/1OT5Cbl 올려두었으니 참고바랍니다.

from WordPress http://ift.tt/1EKDz63