SVG1.1에서 newline구현하기 (+자동 줄바꿈)

SVG1.1 spec에는 줄바꿈 기능이 존재하지 않는데

필요에 의해 직접 줄바꿈 & 자동 줄바꿈 기능을 구현하게 되었다

SVG Text생성 시 사전에 정의된 TextBox(rect)를 같이 표시하도록 처리하고 있어서

해당 영역을 기준으로 line의 자동 줄바꿈 처리를 적용했다.

아래의 Code는 Text요소에 대한 줄바꿈 & 문단 상하좌우 정렬을 수행한다.

var LINE_HEIGHT_RATE = 1.5;
var NEW_LINE_DELIMITER='\n';
function splitAndReDrawText(d, el){
	var namePos = d.name_position.split('-')[0];
	var svgTextSelection = d3.select(el);
	var text = getObjText(d);
	lineCnt=0;

	svgTextSelection.text("");
	//Text를 여러개의 tspan으로 분할
	text.split(NEW_LINE_DELIMITER).forEach(function(lineText){
		var curLineTextArr = lineText.split('');
		var nextLineTextArr = [];
		var tspan = svgTextSelection.append("tspan").text(curLineTextArr.join(''));
		lineCnt++;
		while(tspan.node().getComputedTextLength() > d.width){
			nextLineTextArr.splice(0, 0, curLineTextArr.pop());
			tspan.text(curLineTextArr.join(''));
			if(!(tspan.node().getComputedTextLength() > d.width)){
				tspan = svgTextSelection.append("tspan").text(nextLineTextArr.join(''))
				curLineTextArr=nextLineTextArr;
				nextLineTextArr=[];
				lineCnt++;
			}
		}
	});	
	// tspan 정렬 및 재배치
	svgTextSelection.selectAll("tspan")
	.attr("x", getPosXByTextAnchor[d.textAnchor](d))
	.attr("dy", d.font_size*LINE_HEIGHT_RATE);
	svgTextSelection.select("tspan:first-child").attr("dy", null);
	svgTextSelection.attr("y", getPosYByObjNamePos[namePos](d, lineCnt));
}

var getPosXByTextAnchor = {
	start : function(d){return d.posX},
	middle : function(d){return d.width/2},
	end : function(d){return d.width},
}

var getPosYByObjNamePos = {
	Upper : function(){return 0},
	Middle : function(d, lineCnt){return (d.height/2) - (((d.font_size*lineCnt) + ((lineCnt-1)*((d.font_size*LINE_HEIGHT_RATE)-d.font_size)))/2)},
	Bottom : function(d, lineCnt){return d.height - ((d.font_size*lineCnt) + ((lineCnt-1)*((d.font_size*LINE_HEIGHT_RATE)-d.font_size))) -5/**padding*/},
}

적용된 화면

자동 줄바꿈이 적용되는 경우 해당 블록은 약 (line의 범위를 벗어난 char개수) x (line수)

만큼 렌더링된다.

getComputedTextLength()를 사용하지 않고 처리하여 개선할 수 있으나

font/언어/픽셀 비율(scale에 따라)등의 변수를 고려하여 적용하기는 어려움이 있을 것 같아

위와 같이 적용하였음

아래 내용을 참고하였다

https://www.xml.com/pub/a/2002/09/11/quint.html