텍스트 정렬에 대한 질문입니다.

Question

실전처럼 막대 그래프 그리기(bar)에 대한 예제를 보는 도중에 바의 가운데에 텍스틀 위치할 때 나의 텍스트 길이를 기반으로 센터 정렬하는 방법은 없나요? 매번 if문으로 가운데로 정렬하는 방법밖에 없는건지 궁금하여 질문드립니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 김영준님. 텍스트를 막대 그래프의 가운데에 정렬하는 문제는 D3.js에서 자주 접할 수 있는 문제입니다. D3.js에서는 SVG 텍스트 요소를 사용하여 쉽게 센터 정렬을 구현할 수 있습니다. text-anchor 속성을 활용하면 텍스트를 자연스럽게 가운데에 배치할 수 있습니다. 일반적으로 막대의 중앙에 텍스트를 배치하기 위해서는 text-anchor: middle 속성을 활용합니다. 이 속성을 사용하면 텍스트의 중앙을 기준으로 좌우로 동일하게 배치됩니다. 예를 들면: svg.selectAll("text") .data(data) .enter() .append("text") .attr("x", function(d) { return xScale(d) + (barWidth / 2); }) .attr("y", function(d) { return yScale(d) - 5; }) .attr("dy", ".35em") .style("text-anchor", "middle") .text(function(d) { return d; }); 위의 코드에서 x 속성은 막대의 위치에 바의 절반 너비를 더하여 텍스트의 수평 중앙에 위치시킵니다. style("text-anchor", "middle") 는 SVG 텍스트 요소의 수평 정렬을 중앙으로 설정합니다. 관련된 내용과 예제는 D3.js 코드 스니펫을 사용한 막대 그래프 텍스트 정렬 방법 에서 더 많은 정보를 확인하실 수 있습니다. 기본적으로 D3.js의 SVG 속성을 활용함으로써 if문 없이 매끄러운 센터 정렬이 가능합니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.