2012-07-26 4 views
14

트리 레이아웃을 사용하여 약간 수정 된 트리를 만들었습니다. 나는 왼쪽에서 오른쪽으로 규칙적인 규칙 대신에 오른쪽에서 왼쪽으로 트리를 향하게해야했다. 이것을하기위한 옳고 적절한 d3 : ish 방법은 무엇입니까?트리 그리기 방향

레이아웃을 만든 후에 x 좌표를 뒤집어서이 작업을 끝내지 만 해킹이라고 생각합니다. 분명히 더 우아한 것이 있습니까?

센터 주위에서 SVG 회전을 수행하려고 생각했지만 텍스트를 바르게 회전시키기 위해 레이블을 회전해야했습니다. 그것도 옳다고 생각하지 않았습니다.

+0

포스트 일부 코드. – Wex

답변

27

트리 레이아웃 의 폭 (X)과 깊이 (Y)의 좌표 공간을 임의의 노드의 위치를 ​​계산한다. 레이아웃의 방향을 변경하려면 레이아웃의 좌표 공간에서 SVG 픽셀 좌표로 매핑을 변경하십시오. 수동으로 매핑하지 않으려면 quantitative scales을 사용하여보다 직관적 인 (그러나 좀 더 자세한) 매핑을 지정할 수 있습니다.

는 다음 네 가지 방향을 보여주는 예입니다 :

+0

26 번 줄에 버그/오타가 있습니다. 링크 앞에 "http :"가 없습니다. –

+0

더 자세히 설명해 주실 수 있습니까? 평균 HTML 및 JS 지식 및 작동하는 응용 프로그램 (왼쪽에서 오른쪽으로 확장 가능/클릭 가능 트리)이 있으며 맨 아래로 만들고 싶습니다. –

+0

productTree.js의 두 위치에서 x와 y를 변경하여 트리 구조를 수직으로 만들고 다른 레이아웃은 올바른 위치에 레이블을 만들었습니다. 불행히도 나무는 하숙인이되지 않으므로 레이블이 서로의 위에 있습니다 : / –