SVG 그래프(차트) 만들기 (베지어 곡선)

베지어 곡선 참고링크

• https://ko.javascript.info/bezier-curve
• https://blog.coderifleman.com/2016/12/30/bezier-curves/

베지어 곡선 테스트해보기 링크

• https://cubic-bezier.com/#.5,0,.5,1

 

베지어 곡선을 차트로 만들어 보기전에 간단한 예제로 문법을 살펴봅시다

차트에서 활용할 곡선은 이런 모양입니다

이런식의 선을 계속 연결하면 베지어 곡선의 차트가 완성될 것 같습니다

 

svg의 path를 사용했는데 문법은 polyline과 비슷하지만 명령문자에 M, C가 사용되었습니다

M, C 말고도 추가로 여러가지 명령문자가 있지만 자세한건 아래의 링크에서 참고하실 수 있습니다

https://developer.mozilla.org/ko/docs/Web/SVG/Attribute/d

 

codesandbox의 코드는 M00,300 C150,300 150,50 300,50 입니다 (왼쪽이 x좌표, 오른쪽이 y좌표)

위의 사진에서는 C값을 넣지 않았지만 2번 앞에 C가 적용된다고 보면됩니다

 

여기에서 차트를 그릴 아이디어를 얻을 수 있습니다

1번과 4번의 위치만 알고 있으면 2,3번의 위치를 알수 있게됩니다

 

값 구해보기

2번의 x좌표 150 = (1번의 x좌표 00, 4번의 x좌표 300)의 중앙

2번의 y좌표 300 = 1번의 y좌표 300

 

3번의 x좌표 150 = (2번과 동일)

3번의 y좌표 50 = 4번의 y좌표

 

마지막으로 간단한 예제로 polyline과 베지어곡선을 적용한 그래프의 차이를 살펴봅시다

비록 간단한 모양이긴 하지만 그래프가 달라진 것을 확인할 수 있습니다

저는 path의 시작점을 M이라는 명령문자로 시작하고

끝지점을 L이라는 명령문자로 끝냈습니다 (더 좋은방법이 있다면 댓글에 남겨주세요~)

 

polyline의 포스트 글과 마찬가지로 배열의 데이터를 읽어서 사용하면 더욱 좋겠죠?

 

이상 베지어곡선을 이해하시는데 도움이 되셨길 바랍니다

 

혹시나 더 이쁜 베지어 곡선을 만드는 방법이 있다면 댓글에 남겨주세요~