키흐

 구현하는데 걸린 시간 보다도 버그잡는데 시간이 훨씬 많이 걸렸다.

버그 잡다가 개선한 부분에서 맘에 드는 부분은 노드의 포지션 잡는 부분.

avl tree를 위에서 바라보면 결국에는 전체 노드들의 value를 소팅한것처럼 보인다.

이 점을 이용해서 x좌표 값은 쫙 줄세워버리니 코드가 한결 짧아졌다.

y는 height에 기반하여 그리면된다.

노드의 엣지를 하나의 노드에 귀속 시켜서 프로그램을 짰떠니,

전후 관계가 바뀌는 로테이션에서 많이 복잡해졌다.

몇번 생각을 해보니 종속시키는 것보다는 n*n 매트릭스에 저장하는게 더 나을 것 같다.

https://github.com/fpnuseis/MY-Tree-Visualization-Project

ㅠㅠ

var rect = s.rect(100,100,100,100);

rect.animate({

translate : 't100'

,500);

이렇게 하면 애니메이션 끝나고 나서 rect.attr("x");의 값이 당연히

200일 줄 알았는데 100이다;

이거땜에 밤새고..

Snap svg 튜토리얼 보는 중 내게 필요한 핵심 내용을 발견했다.

Tree의 연산을 시각화하여 일련의 연산들을 순차적으로 보여줘야하는데,

그것을 고민하던중 발견!

요지는 animate함수의 callback과 array에 내가 하려는 animate 내용들을 저장하는것...

이건 안된다.

CSS에서 height를 바로 100%로 하는 것이 불가하고 따로 작업이 필요하다고 한다.

2.Snap.transform

트랜스폼 문자열 형식

t x y : x,y로 이동.

여기서 x,y는 기존 위치에 대한 상대좌표.

r d x y : d만큼 회전한다 (x,y)를 중심으로

x,y는 생략가능

예시

var rect = s.rect(100, 100, 100, 100);

rect.transform('t0,0r45t0,0t0,0t0,0'); //기존 위치에서 0,0 이동후 45도 회전 후 0,0 이동 후 0,0 이동

레퍼런스 설명이 부족해서 데모를 보는게 더 유익한데, 몇몇개는 코드가 너무 길다;