[D3JS] 3. React + d3 얼굴 그리기

이 글은 https://youtu.be/2LhoCfjm8R4 강의를 정리한 것입니다.

 

[ React + D3 얼굴 그리기 ]

드디어 D3를 사용하는군요! svg와 어떻게 다를지 궁금합니다.

 

svg 에는 arc가 없지만 d3에는 arc가 있습니다. arc란 뭘까요?

arc는 d3-shape에 있습니다.

https://github.com/d3/d3-shape

GitHub - d3/d3-shape: Graphical primitives for visualization, such as lines and areas.

글을 읽어보면 각도를 설정하는 등 svg의 circle보다 더 많은 기능을 갖고 있음을 알 수 있습니다.

arc는 cx와 cy로 옮기는 기능이 없습니다. svg에서 제공하는 <g> (group element)를 이용하여 element들의 위치를 모두 조정할 수 있습니다.

 

코드 : https://vizhub.com/curran/4297411eba0a4287a70f5da9dab5fd87?edit=files&file=index.js 

Smiley Face Part III

코드를 살펴보시면 g 태그에 transform 속성을 통해 circle과 path를 한꺼번에 옮기는 걸 보실 수 있습니다. 또한 기존 코드 cx, cy에 있던 centerX, centerY 변수들이 다 사라진 걸 알 수 있습니다.

 

과제로 새로운 얼굴 표정을 만들어 보시라고 합니다.

https://vizhub.com/harrdas/2c2f1381f95e4e1c97f421036b6b08ee?edit=files&file=index.js 

Fork of Smiley Face Part III

저는 사각형과 곡선으로 괴상한 얼굴을 만들어 봤습니다 ㅋㅋ

여러분들도 얼굴 만들어 보세요~!