-
D3.js <svg> 요소D3 2021. 6. 28. 23:09
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- d3 라이브러리 추가 --> <script src="d3.v3.min.js" type="text/JavasScript"></script> </head> <body> <div id="infovizDiv"> <svg style="width: 500px;height: 500px;border: 1px lightgray solid;"> <path d="M 10,60 40,30 50,50 60,30 70,80" style="fill:black;stroke:gray;stroke-width:4px;"/> <polygon style="fill:gray;" points="80,400 120,400 160,440 120,480 60,460"/> <g> <line x1="200" y1="100" x2="450" y2="225" style="stroke:black;stroke-width:2px;"/> <circle cy="100" cx="200" r="30"/> <rect x="410" y="200" width="100" height="50" style="fill:pink;stroke:black;stroke-width:1px;"/> </g> </svg> </div> </body> </html>예제 코드
<svg>요소에 대해서 알아보자
모든 그림을 넣을 요소다. 왼쪽 꼭대기는 0, 0이며, 이 예제에서 사각형 모양으로 정의한 500px x 500px 영역을 벗어난 그림은 모두 잘린다. <svg> 요소는 CSS로 테두리와 배경을 다르게 설정할 수 있다. 그리고 viewBox 속성을 이용하면 동적으로 크기를 변경할 수 있다.
CSS로 SVG 영역의 스타일을 변경하거나 다음과 같이 D3로 스타일을 추가할 수 있다.
d3.select("svg").style("background", "darkgray");
<circle>,<rect>,<line>,<polygon>요소
SVG는 범용 d 속성보다 다루기 쉽도록 각기 크기와 위치 속성을 가진 일련의 공통된 도형을 제공한다. 속성은 사용할 요소에 따라 다르다. <rect>는 x와 y속성으로 도형의 왼쪽 꼭대기 위치를, height와 width 속성으로 높이와 너비를 결정한다. <circle> 요소는 cx와 cy 속성이 원의 중점을, r 속성이 원의 반경을 결정한다. <line> 요소는 x1과 y1 속성이 시작점의 위치를, x2와 y2 속성이 중점의 위치를 정의한다. <ellipse> 요소도 이와 비슷하게 간단한 도형을 정의하며, <polygon> 요소는 시계 방향으로 진행하며 다각형의 각 꼭지점의 XY좌표를 points라는 속성에 갖고 있다.
스타일을 변경해 어떤 도형이든 색상, 스트로크, 투명도를 바꿀 수 있다. fill은 도형을 채울 색상을 결정하고, stroke, stroke-width, stroke-dasharray는 테두리를 결정한다.
<text> 요소
SVG는 도형뿐만 아니라 텍스트를 작성하는 기능도 제공한다. SVG 텍스트는 HTML 요소에서 볼 수 있는 포맷을 지원하지 않으므로 주로 레이블에서 사용된다. 기본적인 포맷 기능이 필요하면 <text> 요소 안에 <tspan> 요소를 넣어서 구현한다.
<g> 요소
그룹 요소인 <g>는 시각적으로 표현되지 않으며 공간을 차지하지 않는다는 점에서 지금까지 설명한 SVG요소들과 다르다. 대신 요소들을 논리적으로 그룹화한다. 많은 도형과 텍스트로 구성된 그래프 객체를 생성할 때는 <g>요소를 상당히 많이 사용한다. 예를 들어 원 위에 레이블을 놓고 원과 레이블을 동시에 움직이고자 한다면 다음과 같이 <g> 요소 안에 넣는 편이 좋다.
<g> <circle r="2"/> <text>This circle's Label</text> </g>영역 안에서 <g>요소를 이리저리 움직이려면 <g>의 transform 속성만 조정하면 된다. transform을 사용하려면 도형을 변환하는 방법을 구조화된 방식으로 기술해야 하므로 단순히 x나 y 속성을 변경하는 방법보다 다소 어렵게 느껴질 수 있다. 이 구조화된 기술 방법 중 하나인 translate()는 요소를 XY좌표쌍으로 이동하려면 translate(x, y)형태로 값을 지정한다.
따라서 <g>요소를 오른쪽으로 100px, 아래쪽으로 50px 이동하고자 한다면 transform 속성을 transform="translate(100, 50)"으로 설정해야 한다.
자식 요소들은 부모인<g> 요소의 위치를 기준으로 상대 위치에 그려지므로, transform 속성의 scale() 설정은 모든 자식 요소의 크기와 위치에 영향을 미친다.
'D3' 카테고리의 다른 글
채광량에 따른 키우기 쉬운 농작물 예제 (0) 2021.07.12 D3.js 차트 컴포넌트 (0) 2021.07.04 D3.js (0) 2021.06.27 D3.js? (0) 2021.06.21