javascript2011. 12. 9. 00:52



트리 뷰어를 간단하게 만들어봤다.

해당 노드를 클릭하면 자식이 만들어진다.


그냥 트리를 출력하면 되는거 아닌가 싶지만

좀만 생각해보면 좀 까다롭다는 사실을 알수 있을 것이다.



콘솔에 트리를 출력할때 흔히 쓰는 방식이 

Pre-Order 방식으로 라인별로 출력을 하는 방식일 것이다.

먼저 상대적인 좌표를 pre-order 출력순으로 좌표를 매긴다.

그뒤 다시 Post-order 순으로 거슬러 올라가면서 자식노드의 

가중치 (자기 자신으로부터 모든 후손의 합) 를 고려한

가장 적당한 위치를 찾아간다.



1. 상대적인 좌표를 빠르게 구한다 (Top-Down)
2. 모든 노드에 대해서 재위치 조정 (Bottom Up)


그외

범용성을 위해 

어떠한 canvas 사이즈에도 매치가 되게 하기 위해

모든 노드의 좌표는 Normalize 되며

노드 자체의 크기도 동적으로 조정된다.



애니메이션은

목표 좌표를 먼저 계산한 뒤에

실제 좌표를  목표 노드까지 프레임에 따라 갱신시켜 나가는 식이다.

감소율 개념을 적용하면 마치 댐퍼로 막은 것과 같이

빠른속도에서 점차적으로 속도가 줄어들 것이다. 


크롬 확장

 
Posted by 멍충한아싸

댓글을 달아 주세요