텍스트 정렬에 대한 질문입니다.
실전처럼 막대 그래프 그리기(bar)에 대한 예제를 보는 도중에
바의 가운데에 텍스틀 위치할 때 나의 텍스트 길이를 기반으로
센터 정렬하는 방법은 없나요?
매번 if문으로 가운데로 정렬하는 방법밖에 없는건지 궁금하여
질문드립니다.
답변 1
0
안녕하세요, 인프런 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문 없이 매끄러운 센터 정렬이 가능합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
이미지 배경 문의
0
65
1
svg 직접 그리기
0
58
1
[크로스브라우징] safari에서 동영상 영역 미노출
0
106
1
항상 궁금했는데 크림슨 컬러 선택하셨을때 활용했던 사이트 좀 알려주세요~
0
109
2
vue강의는안하시나요?!
0
100
1
스크롤 속도에 따른 messageA_opacity_out
0
115
1
drawImage(objs.videoImages[sequence], 0, 0); error
0
88
1
선생님 캔버스 width 크기는 이미지 크기에맞게 해줘야하나요?
0
126
0
svg 태그 사용 방식 질문
0
135
1
선생님 안녕하세요. 혹시 메인개발(?)분야가 뭔지 궁금합니다.
0
206
1
SVG 파일 CSS 애니메이션
0
215
1
React에서 load 상태를 어떻게 감지할 수 있을까요?
0
678
1
[섹션7-3: 버그수정 2] tempYOffset 오류
0
194
1
스크롤할 때 캔버스로 하신 이유가 있으신가요? 그냥 성능 떄문에 캔버스로 하신건가요?
0
312
2
게속 오류떠서 글 작성해봐요....
0
505
2
곡선에 따라 글자쓰기에서 path 대신 circle은 안되나요?
0
285
1
d3 cdn 연동 링크를 찾을 수 없네요
0
292
1
foreach 문 자동완성하는 익스텐션 알려주세요!
0
517
2
지도 관련 질문입니다.
0
378
0
차트 배경 그리드
0
317
0
강의영상에 자동완성 설정 궁금합니다
0
200
0
저기 혹시
0
277
1
질문이 하나 있어요
0
268
1
강의 잘듣고 있습니다.^^
0
215
1





