코드굽는빵집

23/03/04 새벽 1시경 현재 이진트리에서 노드간 이어지는 라인을 그리는 효과를 추가했다. 여기서 발견한 문제점은 1. stroke-dasharray 및 dashoffset을 활용하여 애니메이션을 추가해야한다. 2. 그러나 해당 line은 노드의 위치가 유동적으로 바뀌는 path로 그려지는 svg이다. 3. pathLength를 활용하기 전, path를 만들기 전에 불러진다. 4. 또한 유동적으로 바뀌기에 tag나 css에서 간단하게 사용하기가 힘들다. 여기서 우리는 간단하게 해결을 하였다. 3번 문제점 -> 해당 문제는 pathLength를 활용하기위한 방도를 찾는게 아니라, 미리 알고있는 좌표값을 통해 곡선의 길이를 구하였다. Math.sqrt( (x2-=x1)*x2 + (y2-=y1)*y2 ) ..

해당 문제는 팀원과 함께 svg 애니메이션을 적용시키면서 생긴 문제이다. svg이미지에 마우스를 올릴 경우(:hover) 선택한 원이 대략 20%정도 커지는 효과를 보여주는 것이다. 해당 svg는 circle 태그와 text태그를 g태그로 그룹지어 만들었다. 원 안에 특정 데이터가 담겨져 있는 형식이다. {props.data} 해당 SVG에게 커지는 애니메이션 효과는 css에서 간단하게 줄 수 있었다. #Circle{ transition: all ease 0.2s 0s; transform-origin: 50% 50%; } #Circle:hover{ transform: scale(1.2); } 바로 이렇게 말이다. transition 옵션을 통해 전체적인 크기를(all) 0.2초에 걸쳐 보여주는 형식이다...