D3.js 공부 - 1(svg)

D3.js는 자바스크립트 라이브러리입니다.

 

데이터 및 도형 작업이나 데이터 시각화를 할 때 필요합니다.

 

우선 SVG(Scalable Vector Graphics)에 대해 간단히 살펴보면

 

SVG는 이미지 렌더링 기법입니다. 텍스트를 사용한 이미지 그리기입니다.

 

캔버스라고 생각하면 될 것 같습니다.

 

<svg width = "500" height = "500"></<svg>

이런 식으로 svg 태그를 사용합니다.

 

만약 여기에 사각형을 그리고 싶다면 내부에 <rect> 태그를 이용합니다.

 

즉

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200"></rect>
</svg>

width와 height를 지정해줍니다. 이는 나중에 동적으로 생성하게 됩니다.

 

색을 채우고 싶으면 rect 태그 속성에 fill을 추가해줍니다. 

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200" fill = "black"></rect>
</svg>

fill을 black으로 지정시 결과