D3] TEXT 태그에 대한 CSS

22 Jun 2018

Reading time ~1 minute

D3를 이용한 그래프에 표기되는 TEXT에 대한 CSS 정보

TEXT의 출력 위치 조절

d3 svg text alignment (v3)를 보면 정리가 잘되어 있다.

기본적으로 시작점부터 오른쪽으로 텍스트가 출력되는데, text-anchor에 값을 middle, end로 변경하여 조절 가능하다

기본 값은 start 이다.

nodeg.append("text")
        .style("font-size", "0.85em")
        .attr("text-anchor", "middle")
        .attr("fill", parent.atomTextColor)
        .style("pointer-events", "none")
        .style("color", "#222")
        .text(function(d) {
            return d.text;
        });

TEXT Multiline 출력

D3를 이용한 그래프에서 일반적으로 상요되는 TEXT 테그는
과 \n이 동작하지 않는다.

하지만 white-space에 pre 스타일을 주게 되면 개행문자(\n)가 동작 한다.

nodeg.append("text")
            .attr('y', function(d) {return +30;})
            .attr("dy", ".35em")
            .attr("class", "atomsText")
            .style("white-space", "pre")
            .style("font-size", "0.85em")
            .attr("text-anchor", "middle")
            .attr("fill", parent.atomTextColor)
            .style("pointer-events", "none")
            .style("color", "#222")
            .text(function(d) {
                return d.desc.replace(/<br>/gi,"\n");
            });

D3 라이선스 관련

D3는 BSD 라이선스를 따르고, D3를 이용하여 만든 차트들은 각각의 라이선스를 가지고 있다. 대부분은 GNU GPL v2,v3를 따르지만 몇몇 차트나 플러그인은 MIT, BSD, 라이선스가 없는 경우가 있다. 체크를 잘하여 사용하자.

참고 자료