D3] TEXT 태그를 wraping하여 라벨 나누기

25 Jun 2018

Reading time ~1 minute

D3에서 긴 텍스트에 대한 처리

이전 포스팅의 텍스트 줄바꿈 처리는 모든 브라우져에서 동작 하지 않는다. 확인 해본 결과 Firefox에서는 동작 하지만, 많이 사용되는 Chrome에서는 동작 하지 않는다.

모든 브라우져에서 동작하기 위한 코드를 찾아본 결과 Wrapping Long Labels을 발견 할 수 있었다.

위의 코드에서 wrap을 해주는 매소드에 보면 text 태그 하단에 들어가는 tspan이라는 태그를 발견 하였는데, 이를 이용하여 여러 라인 처리를 하는 것을 확인했다. 이를 활용하면 긴 문장에 대한 여러 방법으로 처리가 가능 하다.

function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
  });
}

SVG tspan element을 보면 tspan 요소는 SVG에서 여러 텍스트를 그리는데 사용되는 테그로 설명 된다. 해당 태그를 이용하면 첨부된 소스를 사용하지 않고도 여러 라인의 문자열 처리가 가능하다.

라이선스 관련

Released under the GNU General Public License, version 3.

참고 자료