도형을 변환 시키는것을 알아보겠습니다.
즉 도형을 회전 시키거나 이동 시키거나 등등...
Translate : x, y좌표를 움직입니다.
ex) Translate(60,60) => 60,60만큼 이동
Rotate : 몇도 만큼 회전 시킵니다.
ex) Rotate(45) => 45도 회전
Scale: 확대 시킵니다.
ex) Scale(10)
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width = "300" height = "300">
<rect x = "20"
y = "20"
width = "60"
height = "60"
fill = "green"
transform = "translate(30 30)">
</rect>
</svg>
</body>
</html>
직사각형 도형이 있는데 이를 (30,30)만큼 이동 시킵니다.
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width = "300" height = "300">
<rect x = "20"
y = "20"
width = "60"
height = "60"
fill = "green"
transform = "translate(60 60) rotate(45)">
</rect>
</svg>
</body>
</html>이는 rotate를 통해 45도 만큼 직시각형을 회전시킵니다.
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width = "300" height = "300">
<g transform = "translate(60,60) rotate(30)">
<rect x = "20"
y = "20"
width = "60"
height = "30"
fill = "green">
</rect>
<circle cx = "0"
cy = "0"
r = "30"
fill = "red"/>
</g>
</svg>
</body>
</html>원을 추가하여 <g>태그로 그룹화 시켜서 함께 변환 시킵니다. 즉 직사각형 원 모두 (60,60)만큼 이동 시키고 30도 회전 시킵니다.
이들을 D3.js를 이용하면 어떻게 될까요 ??
우선 컨테이너를 생성해줍니다.
<div id = "svgcontainer"></div>
그 다음 svg를 생성해줍니다. 즉 틀을 만들어줍니다.
var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
.append("svg")
.attr("width", width)
.attr("height", height);높이는 300, 너비는 300을 통해서 위 컨테이너에 svg태그를 붙여주고 속성으로 width와 height를 추가합니다.
그럼 틀은 만들어졌습니다.
그 다음은 그룹을 시키고 변환 시킬 속성을 정해줘야겠죠!!
var group = svg.append("g").attr("transform", "translate(60, 60) rotate(30)");
만들어진 svg에 g태그를 붙이고 속성으로 변환 시켜줍니다.
그 다음은 직사각형과 원을 그려줘야겠죠 .!!
var rect = group
.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 60)
.attr("height", 30)
.attr("fill", "green")<직사각형>
var circle = group
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 30)
.attr("fill", "red")<원>
즉 직사각형과 원을 D3.js로 표현해본겁니다.
전체코드는 아래와 같습니다.
<!DOCTYPE html>
<html lang = "en">
<head>
<title>SVG rectangle</title>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
body { font-family: Arial; }
</style>
</head>
<body>
<div id = "svgcontainer"></div>
<script language = "javascript">
var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
.append("svg")
.attr("width", width)
.attr("height", height);
var group = svg.append("g")
.attr("transform", "translate(60, 60) rotate(30)");
var rect = group.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 60)
.attr("height", 30)
.attr("fill", "green")
var circle = group
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 30)
.attr("fill", "red")
</script>
</div>
</body>
</html>마지막으로 이들을 라이브러리로 제공해주기도 합니다.
결과는 위와 같습니다.
즉
<script src = "d3-transform.js"></script>위를 추가해주면 라이브러리를 사용할 수 있습니다.
transform (), translate (), scale (), rotate ()를 사용할 수 있습니다.
var my_transform = d3Transform()
.translate([60, 60])
.rotate(30);
var group = svg
.append("g")
.attr("transform", my_transform);위 코드처럼 라이브러리를 사용할 수 있습니다.
my_transform을 translate와 rotate 메서드를 이용한 것을 그룹화 변환 속성에 넣어줍니다.
'웹 > JavaScript,JQurey' 카테고리의 다른 글
| D3.js 공부 8 - 에니메이션 (0) | 2019.04.16 |
|---|---|
| D3.js 공부 7 - transition(전환) (0) | 2019.04.10 |
| D3.js 공부 5 - SVG (0) | 2019.04.03 |
| D3.js 공부 4 - 데이터 조인 메서드 (0) | 2019.04.02 |
| D3.js 공부 3 - 데이터 조인 (0) | 2019.04.02 |
