D3.js 공부 5 - SVG

SVG는 XML기반 백터 그래픽 형식입니다.

 

우선 SVG를 이용하려면 

 

SVG로 width와 height를 지정해주고 SVG 이미지를 만듭니다.

 

<svg width = "300" height = "300">

</svg>

만약에 (0,0)을 기준으로 (100,100)에서 (200,200)으로 가는 우하향 선을 그리고 싶다면

 

앞서 만든 svg이미지 안에 <line>태그를 입힙니다.

 

<svg width = "300" height = "300">
            <line x1 = "100" y1 = "100"  x2 = "200" y2 = "200" style = "stroke:rgb(255,0,0);
           stroke-width:2"/>
</svg>

<line> 태그 내 x1과 y1, x2와 y2는 좌표 속성이고 style속성으로 빨간색 선과 굵기를 지정해줍니다.

 

이제 D3.js로 SVG를 사용해봅시다.

 

우선 컨테이너를 지정해줍니다.

 

<div id = "svgcontainer"></div>

앞서 배운 select와 append를 통해 svg를 주입해주고 attr과 style을 통해 추가해줍니다.

 

var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
   .append("svg").attr("width", width).attr("height", height);

select로 컨테이너 지정해주고 append로 svg를 추가하며 svg의 속성 너비 높이를 지정해줍니다.

 

추 후 svg변수를 통해 그림을 그리겠죠.

 

svg.append("line")
   .attr("x1", 100)
   .attr("y1", 100)
   .attr("x2", 200) 
   .attr("y2", 200)
   .style("stroke", "rgb(255,0,0)")
   .style("stroke-width", 2);

이런 식으로 svg로 append를 해서 line을 추가해주고 line태그의 속성 스타일을 지정해줍니다.

 

결과는 위와 같습니다.

 

사각형

 

사각형은 <line>이 아닌 <rect>로 지정해주며 속성 x와 y는 왼쪽 위 모서리 x좌표 y좌표입니다.

 

width는 사각형 가로 길이 height는 사각형 높이입니다.

 

var width = 300;
var height = 300;
//Create SVG element
var svg = d3.select("#svgcontainer")
     		.append("svg")
            .attr("width", width)
            .attr("height", height);
         //Create and append rectangle element
         svg.append("rect")
            .attr("x", 20)
            .attr("y", 20)
            .attr("width", 200)
            .attr("height", 100)
            .attr("fill", "green");

fill 속성은 색으로 채워주기입니다.

 

결과는

원 

<circle cx = "200" cy = "50" r = "20"/>

즉 원의 중심은 (200,50) 반지름은 20입니다.

 

이를 마찬가지로 D3.js를 이용하여 만들어보면

 

         var width = 300;
         var height = 300;
         //Create SVG element
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         //Append circle 
         svg.append("circle")
            .attr("cx", 200)
            .attr("cy", 50)
            .attr("r", 20)
            .attr("fill", "green");

타원형

 

<ellipse cx = "200" cy = "50" rx = "100" ry = "50"/>

즉 타원의 중심은 (200,50)이고 rx는 x의 반지름 ry는 y의 반지름입니다.

 

         var width = 300;
         var height = 300;
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         svg.append("ellipse")
            .attr("cx", 200)
            .attr("cy", 50)
            .attr("rx", 100)
            .attr("ry", 50)
            .attr("fill", "green")