FrontendLibraryD3.js

D3.js SVG

D3.js SVG

SVG는 도형을 그리기 위한 HTML의 태그로 rect, circle, line, path, ellipse, polyline 등을 사용하여 그린다.

HTML의 SVG 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<svg wdth="500" height="500" style="background-color:#f00">
    <rect x="10" y="10" width="480" height="30" fill="green" stroke="blue" stroke-width="5"></rect>
    <circle cx="100" cy="100" r="50" fill="red" stroke="blue" stroke-width="5"></circle>
    <ellipse cx="300" cy="100" rx="70" ry="30" fill="red" stroke="blue" stroke-width="5"></ellipse>
    <line x1="10" y1="200" x2="480" y2="200" stroke="red" stroke-width="5"></line>
    <path d="M10,210 L110,220 210,210 310,220 410,210" fill="none" stroke="blue" stroke-width="5"></path>
    <polyline points="200,300 230,250 260,300" fill= "red" stroke="blue" stroke-width="5"></polyline>
    <text x="150" y="35" fill="black" font-size="30px">Hello World</text>
    <text x="75" y="120" fill="white" font-size="50px">39</text>
    <g stroke="green" fill="white" stroke-width="5">
        <circle cx="25" cy="25" r="15"></circle>
        <circle cx="40" cy="25" r="15"></circle>
        <circle cx="55" cy="25" r="15"></circle>
        <circle cx="70" cy="25" r="15"></circle>
    </g>
</svg>

d3.js SVG 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// svg(켄버스) : 넓이(500), 높이(500), 배경색(yellow)
var svg = d3.select('body').append('svg')
    .attr('width', 500) // 넓이
    .attr('height', 500) // 높이
        .style('background-color', '#ff0');

// rect(사각형) : 시작위치(10,10), 넓이(480), 내부색(green), 테두리색(blue), 테두리크기(5)
var rect = svg.append('rect')
    .attr('x', 10) // 처음 그림 x축 위치
    .attr('y', 10) // 처음 그림 y축 위치
    .attr('width', 480) // 넓이
    .attr('height', 30) // 높이
    .attr('fill', 'green') // 내부색
    .attr('stroke', 'blue') // 테두리색
    .attr('stroke-width', 5); // 테두리크기

// circle(원) : 위치(100,100), 반지름(50), 내부색(red), 테두리색(blue), 테두리크기(5)
var circle = svg.append('circle')
    .attr('cx', 100) // 시작 x축 꼭지점
    .attr('cy', 100) // 시작 y축 꼭지점
    .attr('r', 50) // 반지름
    .attr('fill', 'red')
    .attr('stroke', 'blue')
    .attr('stroke-width', 5);

// ellipse(타원) : 위치(300,100), 폭반지름(70), 높이반지름(30), 내부색(red), 테두리색(blue), 테두리크기(5)
var ellipse = svg.append('ellipse')
    .attr('cx', 300) // 시작 x축 꼭지점
    .attr('cy', 100) // 시작 y축 꼭지점
    .attr('rx', 70) // x축으로 넓이 반지름
    .attr('ry', 30) // y축으로 넓이 반지름
    .attr('fill', 'red')
    .attr('stroke', 'blue')
    .attr('stroke-width', 5);

// line(선) : 시작점(10,200), 끝점(480,200), 테두리색(red), 테두리크기(5)
var line = svg.append('line')
    .attr('x1', 10)
    .attr('y1', 200)
    .attr('x2', 480)
    .attr('y2', 200)
    .attr('stroke', 'blue')
    .attr('stroke-width', 5);

// path(특수라인) :
var path = svg.append('path')
    // M: 시작 위치로 이동 (M 10,210 => (10,210)꼭지점이 시작위치가 됨
    // L: 이동할 라인 좌표 (L 110,220 => (110,220)꼭지점으로 라인을 그음)
    // C: 곡선 S : 부드러운곡선  Q : 차 베지에곡선 T :  부드러운 차 베지에 곡선 A : 호  Z = 끝경로(시작점과 이음)
    .attr('d', 'M10,210 L110,220 210,210 310,220 410,210')
    .attr('fill', 'none')
    .attr('stroke', 'blue')
    .attr('stroke-width', 5);

위에서 사용된 d3.js의 메소드를 살펴보면

  • .select(‘태그’) => 특정태그를 선택한다. 그림을 그릴 위치를 선택한는것
  • .append(‘태그’) => 태그 추가
  • .attr(‘name’, ‘value’) => 태그의 속성 name에 해당 value를 넣음
  • style(‘name’, ‘value’) => 해당 태그의 style를 지정한다. 별로로 태그의 기본속성없는 외부 스타일을 추가할때 사용

style의 경우는 css로 따로 관리가 가능하다.

참조

공유하기