SVG4 리액트에서 도넛 차트를 만들어보자 리액트에서 도넛 차트를 만들어보자 목차 도넛 차트 Canvas? DIV? SVG? stroke-dasharray stroke-dashoffset 직접 만들어보기 애니메이션 keyframes 도넛 차트 Canvas? DIV? SVG? 도넛 차트는 Canvas, DIV(html, css), SVG 등 크게 3가지 방법을 사용하여 만들 수 있습니다. 각각의 특징을 간단하게 살펴보면, Canvas를 이용한 방식의 특징은 비트맵 영역을 활용하는 것입니다. 즉, 자바스크립트 코드로 화면 위에 픽셀을 그려 넣는 방법입니다. 이와 같은 방식은 픽셀을 다루게 되어 도형의 크기에 따라 해상도를 따로 고려해야 하는 단점이 있습니다. 다음으로 DIV를 이용한 방법입니다. DIV로 도넛 차트를 그리는 경우, 원을 나타내기 위해.. 2021. 11. 10. SVG viewBox SVG viewBox 목차 SVG란 viewBox란 의미 기본 예시 위치 조정 예시 확대, 축소 예시 SVG란 SVG에 대해서 간단하게 알아보자. SVG란 Scalable Vector Graphics의 약자로 확장 가능한 벡터 그래픽, 다시 말해 크기를 확대하거나 축소할 수 있는, 수학적 함수를 이용해 도형이나 선을 그려서 표현한 그래픽이라고 할 수 있다. 여기서 수학적 함수를 이용해 도형이나 선을 그려서 표현한이라는 의미는 우리가 수학 시간에 배웠던 좌표평선 위의 그려져 있는 그래프 정도로 이해할 수 있다. SVG는 이런 방식을 차용함으로써, 우리가 흔히 알고 있는 jpg, png, gif와 다르게 확대해도 선명도가 떨어지지 않는다. 또한, 도형이나 선으로 구성되어 있어 파일의 용량이 상대적으로 작다... 2021. 10. 24. 210808(일) - 지도 완성 1. 지도 완성 1. 지도 완성 svg를 단순하게 이용하려 했는데, 이런 방법으로는 데이터의 값에 따라 유동적으로 svg를 구성할 수 없었다. 결국 svg를 컴포넌트화 했다. 어쩌면 이렇게 되는 게 당연한 수순인데, 내가 몰랐던 것 같기도 했다. 데이터는 map으로 순회하여 표현했는데, 지도 부분과 지역 위에 나타나는 네모 박스를 한 번에 해결하고 싶었다. 이 부분은 svg를 표현할 때 가장 바깥을 svg 태그로 감싸야 했기 때문에 결국 다음과 같이 분리해서 코드를 구현할 수 밖에 없었다. 지도 설명 박스 부분은 각 지역에 따라서 직접 위치를 설정했고, 마우스를 올리거나 뗄 경우 색이 변해서 사용자가 쉽게 인지할 수 있도록 했다. 이와 같은 기능은 지도svg에도 같이 적용하여, 지도 상에서 지역이나 설명.. 2021. 8. 8. 210807(토) - 지도 만드는 방법 서치 1. 지도 만드는 방법 서치 1. 지도 만드는 방법 서치 지도 만드는 방법에 대해서 찾아봤다. svg를 활용해야 하는 정도만 알아서, 처음엔 우리나라 지도 svg를 구해서 어찌어찌해보려고 했다. svg 자체 속성으로 onMouseOver와 onMouseLeave가 있다는 것을 알아서 아래 gif와 같은 정도까지 만드는 것까지만 하니 하루가 지나갔다ㅠ 2021. 8. 8. 이전 1 다음
