D3.js 곡선 패스위에 글자 넣기

흔히 포토샵이나 일러스트에서 곡선의 패스위에 글자를 넣는 툴이 존재한다.

최근 연구실에서 데이터시각화를 프로젝트를 진행하고 있는데,

곡선의 패스위에 글자를 넣어야 하는 문제를 맞게 되었다.

찾아보니 아래의 링크와 같은 간단한 예제가 있다.

http://bl.ocks.org/nbremer/bf3d285e48189507e0ea

핵심은 textPath 태그이며,

xlink:href 속성이다.

추가적으로 패스의 시작과 끝 순서로 인해 글자가 뒤집히는 경우가 있는데,

이럴때는 패스의 시작과 끝 순서를 바꿔만 주면 반대로 뒤집히게 된다.

(이 문제를 해결하려고 transform을 조작하려는 뻘짓을 하다가 위와같은 쉬운방법이 있음을 깨달았다.

포토샵도 저 원리와 같은데 포토샵을 이전에 다뤄본 경험이 문제를 해결하는데 있어 도움이 되었다~ :^)