d3 기본도형 path
path는 경로라는 의미로 종이 위에 펜을 두고, 펜을 움직여 그 경로를 모양으로 한다고 생각하면 된다.
핵심적인 속성은 d가 있다.
이 d속성을 이용하여 경로를 설정하게 된다.
d
d의 속성은 다음과 같다.
- Move To: M, m
- Line To: L, l, H, h, V, v
- Cubic Bézier Curve: C, c, S, s
- Quadratic Bézier Curve: Q, q, T, t
- Elliptical Arc Curve: A, a
- ClosePath: Z, z
사실 d3를 다루며 다른 도형에 대해선 이해할 수 있어도, 이 path 도형을 이해하는데에는 좀 오랜 시간이 걸렸다. 그래서 다시 하나씩 정리해보았다.
1. Move To
펜을 들어 지정된 곳에 놓는 것으로 생각할 수 있다. 즉 현재 지점을 이동하는 거을 의미한다.
| Command | Parameters | Notes |
|---|---|---|
| M | (x,y)+ | 현재 지점을 x,y로 옮긴다. |
| m | (dx,dy)+ | 현재 경로를 (curX,curY)라고 할 때 현재 지점을 (curX+dx,curY+dy)로 옮긴다. |
2. Line To
선을 그리는 정의이다.
| Command | Parameters | Notes |
|---|---|---|
| L | (x,y)+ | 현재 지점에서 x,y까지 선을 그린다. |
| l | (dx,dy)+ | 현재 경로를 (curX,curY)라고 할 때 현재 지점에서 (curX+dx,curY+dy)까지 선을 그린다. |
| H | x+ | 현재 지점에서 x,y까지 수평선을 그린다. |
| h | (dx,dy)+ | 현재 경로를 (curX,curY)라고 할 때 현재 지점에서 (curX+dx,curY+dy)까지 수평선을 그린다. |
| V | (x,y)+ | 현재 지점에서 x,y까지 수직선을 그린다. |
| v | (dx,dy)+ | 현재 경로를 (curX,curY)라고 할 때 현재 지점에서 (curX+dx,curY+dy)까지 수직선을 그린다. |
3. Cubic Bézier Curve
4개의 점을 사용하는 부드러운 곡선 정의이다.
시작점 (current point)
(Po = {xo, yo})
끝점
(Pn = {xn, yn})
시작 쪽 제어 점
(Pcs = {xcs, ycs}) (controls curvature near the start of the curve)
끝 쪽 제어 점
(Pce = {xce, yce}) (controls curvature near the end of the curve)
같은 시간동안 시작 점에서 시작 쪽 제어 점으로 움직이는 점, 시작 쪽 제어 점에서 끝 쪽 제어 점으로 움직이는 점, 끝 쪽 제어 점에서 끝 점으로 움직이는 점을 각각 Pstarttocontrol, Pcontroltocontrol, Pcontroltoend으로 정의할 수 있다.
또한 PstarttoControl과 Pcontroltocontrol, Pcontrol과 Pcontroltoend을 연결하고 같은 시간동안 각각의 선의 시작점에서부터 끝 점까지 움직이는 점을 정의할 수 있다.
이러한 점을 각각 Pbezierstart, Pbezierend라고 하면 같은 시간동안 이 점의 움직임을 연결한 곡선이 Bezier 곡선이다.
말로 표현하면 좀 어려운데, Ref를 참조하면 이해가 더 쉽다.
| Command | Parameters | Notes |
|---|---|---|
| C | (x1,y1,x2,y2,x,y)+ | 현재 지점에서 x,y까지 3차 베지어 곡선을 그린다. 끝 점은 x,y 시작 제어 점은 x1,y1, 끝 제어 점은 x2,y2로 정의된다. |
| c | (dx1,dy1,dx2,dy2,dx,dy)+ | 현재 지점에서 끝점까지 3차 베지어 곡선을 그린다. 현재 지점을 (curX,curY) 라고 할 때 끝 점은 (curX+dx,curY+dy), 시작 제어 점은 (curX+dx1,curY+y1), 끝 제어 점은 (curX+dx2,curY+dy2)로 정의된다. |
| S | ( x2, y2, x, y)+ | C와 똑같이 동작한다. 다만 시작점을 이전 베지어곡선의 끝점으로 한다. |
| s | ( dx2, dy2, dx, dy)+ | c와 똑같이 동작한다. 다만 시작점을 이전 베지어곡선의 끝점으로 한다. |
4. Quadratic Bézier Curve
세 점을 사용하는 2차 베지어 곡선이다.
시작 점
Po = {xo, yo}
끝 점
Pn = {xn, yn}
제어 점
Pc = {xc, yc} (controls curvature)
| Command | Parameters | Notes |
|---|---|---|
| Q | (x1,y1,x,y)+ | 현재 지점에서 x,y까지 2차 베지어 곡선을 그린다. |
| q | (dx1,dy1,dx,dy)+ | 현재 지점에서 끝점까지 3차 베지어 곡선을 그린다. 현재 지점을 (curX,curY) 라고 할 때 끝 점은 (curX+dx,curY+dy)으로 정의된다. |
| T | (x, y)+ | Q와 똑같이 동작한다. 다만 시작점을 이전 베지어곡선의 끝점으로 한다. |
| t | (dx, dy)+ | q와 똑같이 동작한다. 다만 시작점을 이전 베지어곡선의 끝점으로 한다. |
5. Elliptical Arc Curve
타원의 일부로 정의된 곡선이다. 즉 타원의 호이다.
| Command | Parameters | Notes |
|---|---|---|
| A | (rx, ry, angle, large-arc-flag, sweep-flag, x, y)+ | 현재 지점에서 x,y까지 호를 그린다. rx,ry는 타원의 두 반지름이다. angle은 x축에 대한 타원의 회전 각도이다. large-arc-flag, sweep-flag는 4개의 호가 가능하므로 어떤 호를 그릴지 선택한다. large-arc-flog는 큰 호(1) 작은호(0)을 선택할 수 있다. sweep-flag는 시계 방향 호(1) 반시계 방향 호(0)을 선택할 수 있다. 좌표 x,y는 다음 명령의 새 현재 점이 된다. |
| a | (rx, ry, angle, large-arc-flag, sweep-flag, dx, dy)+ | 현재 지점에서 끝점까지 호를 그린다. 현재 지점을 (curX,curY) 라고 할 때 끝 점은 (curX+dx,curY+dy)으로 정의된다. |
6. Close Path
현재 위치에서 경로의 첫 번째 점까지 직선을 그린다.
| Command | Parameters | Notes |
|---|---|---|
| Z,z | 경로의 마지막 지점을 시작 지점과 연결하여 현재 경로를 닫는다. 두 점이 다른 좌표에 있으면 두 점 사이에 직선이 그려진다. |
interpolate
d3.interpolate를 사용하여 선을 보간할 수 있다.
아래의 링크를 참조하면 된다.(혹은 공식문서)
https://web.archive.org/web/20201029202235/https://www.dashingd3js.com/svg-paths-and-d3js
Ref
https://ko.javascript.info/bezier-curve
https://blog.coderifleman.com/2016/12/30/bezier-curves/