D3.js transform의 translate 함수

웹콘텐츠가 깔끔하고 근사한 디자인이 되려면 배치와 여백이 핵심이라고 할 수 있다.

그것을 위해 우리는 CSS에서 float, margin, padding, border 등등을 이용한다.

D3.js도 단순히 구현만 하는것이 아니라 그것을 배치하고 적절한 여백을 주는 것이 중요하다.

그래야 콘텐츠가 보다 더 깔끔하고 근사하게 보일 것이다.

나는 항상 D3.js 콘텐츠를 구현할때 초기 여백 설정을 한다.

D3.js는 SVG 기반으로 CSS와 다르게 따로 여백 함수가 있지는 않고 transform 의 translate 함수를 사용해서 여백을 설정해줘야 한다.

그리고 콘텐츠 또한 설정한 여백을 기반으로 계산하여 만들어 줘야 한다.

초반에 이러한 여백 부여 방식에 적응하기가 쉽지 않았지만,

자주 사용하면서 점차 익숙해져가고 있는 상태다.

아래는 D3.js 바차트를 만들었을때 여백에 관한 간단한 그림이다.

함수로는 아래와 같이 표현할 수 있다.

.attr('transform', 'translate(' + xMargin + ', ' + yMargin + ')')

이렇게 여백설정을 하면 안에 들어갈 막대바 또한 여백을 고려하여 디자인 해줘야 한다.

눈여겨볼 점은 위의 그림에서 x축라벨의 위치는

attr('transform', 'translate(0, ' + (svgHieght - yMargin*2) + ')')

의 함수를 사용해 translate하여 배치했다.

하지만 저렇게 배치하면 아래의 값들이 툭 튀어나오게 되어 전체적인 위아래 여백 대칭이 안 맞게 된다.

이를위해 시각화 완성후 전체 translate를 상수로 조금씩 조정해 주기도 한다.

이러한 여백 부여방식이 당장은 익숙하지는 않겠지만,

SVG 기반의 D3.js를 사용하는 사람이라면 꼭 집고 넘어가야할 사항이다.