Cộng đồng Hỏi & Đáp của Inflearn

안녕하세요, 인프런 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문 없이 매끄러운 센터 정렬이 가능합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.