여기에서는 d3에 대해 아주 기초부터 제대로된 data visualization까지 차근차근 다뤄볼 예정입니다.
What is D3?
너무나 뻔하지만, 항상 어떠한 주제를 시작할 때 다루고자 하는 주제가 무엇인지 명확히 하는 것이 중요한 것 같습니다.
D3는 Data-Driven Documents를 의미하며 Data를 Visualization해주는 매우 강력한 툴입니다.
특히, D3는 우리가 HTML, SVG, CSS를 사용함에 있어 많은 도움을 줍니다.
만약, SVG가 무엇인지 알고 있고, 바로 라인차트를 그리는 방법에 대해 알고 싶다면
다음 포스트로 바로 이동하셔도 무관합니다.
What is SVG?
D3에서는 SVG를 많이 다룹니다. 따라서, 본격적으로 들어가기 이전에 여기에서는 SVG에 대해 간단히 알아볼 예정입니다.
(참고링크1: SVG Tutorials)
SVG는 Scalable Vector Graphics 를 의미하며, Web상에서 그래픽을 표현해주기 사용하는, 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어입니다. 쉽게 말해서, SVG는 HTML과 텍스트와의 관계를 그래픽에 접목한 것입니다.
HTML에는 svg라는 태그가 존재하며, 매우 다양한 속성과 메소드를 제공하고 있습니다. (참고 링크2: SVG Methods)
여기에서는 SVG를 이용하여 간단하게 원과 사각형을 그려보도록 하겠습니다.
(여기에서 다루는 부분은 d3를 이용하는 것이 아니라, 순전히 HTML에 있는 svg를 이용한 방식입니다.)
1. 도형 그리기
<!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>
</head>
<body>
<!-- 1. -->
<svg width="500px" height="500px">
<!-- 2. -->
<g>
<!-- 3. -->
<circle cy="50" cx="50" r="30"></circle>
<!-- 4. -->
<rect x="100" y="100" width="50" height="50" fill="red" />
</g>
</svg>
</body>
<script></script>
</html>[ Code 분석 ]
1. 먼저 svg태그를 이용하여 우리가 이미지를 그릴 범위를 500px, 500px로 설정해 주었습니다.
2. g태그(group을 의미합니다.)를 이용하여, 도형 항목을 그룹화 해주었습니다.
g태그는 svg 요소들을 그룹화 하는데 사용하는 태그로써 나중에 그룹화 한 항목에 어떠한 효과를 주거나 select할 때 유용합니다.
3. circle svg elemenet를 이용하여 원을 그려줍니다.
cy, cx 속성을 이용하여 원의 중심 위치를 설정해주고, r을 이용해 반지름 크기를 정해줄 수 있습니다.
4. rect svg elemenet를 이용하여 사각형을 그려줍니다.
x, y속서을 이용해 사각형이 그려질 좌표와 width, height를 이용해 크기, fill을 통해 배경색을 속성으로 줄 수 있습니다.
다양한 속성에 대해서는 위의 참고링크를 참조 부탁드립니다.
[ 결과물 ]
위 코드를 이용한 결과는 아래와 같습니다.
이제 svg를 이용해 간단한 vector 도형을 그리는 방법에 대해 정리해 봤습니다.
다음 포스트 부터는 실제로 d3를 사용하는 방법(d3 - 라인차트 그리기)에 대해 정리해보도록 하겠습니다.
'd3' 카테고리의 다른 글
| [ D3 ]2. Learning d3 - 라인차트 그리기 (1) | 2022.12.11 |
|---|
