2012-07-26 20 views
14

Zrobiłem nieznacznie zmodyfikowane drzewo, korzystając z układu drzewa. Musiałem ustawić drzewo od prawej do lewej zamiast zwykłej orientacji od lewej do prawej, która jest domyślna. Jaki jest właściwy i odpowiedni sposób d3: ish to zrobić?Orientacja drzewa rysunku

Skończyło się na tym, po prostu odwracając współrzędną x po utworzeniu układu, ale czuję, że jest to hack. Na pewno jest coś bardziej eleganckiego?

Myślałem o zrobieniu rotacji SVG wokół centrum, ale wtedy będę musiał obrócić etykiety, aby uzyskać tekst w prawo. To też nie było w porządku.

+0

post jakiś kod. – Wex

Odpowiedz

27

Układ drzewa oblicza pozycje węzeł dowolnego układu współrzędnych o szerokości (x) i głębokości (y). Aby zmienić orientację układu, zmień odwzorowanie z układu współrzędnych układu na współrzędne SVG. Jeśli nie chcesz ręcznie wykonać mapowania, możesz użyć opcji quantitative scales, aby określić bardziej intuicyjne (ale bardziej szczegółowe) mapowanie.

Oto przykład pokazujący cztery różne orientacje:

+0

W linii 26 znajduje się błąd/literówka: przed linkiem brakuje "http:" –

+0

. Czy możesz wyjaśnić? Mam średnią znajomość HTML i JS oraz działającą aplikację (rozwijane/klikalne drzewo od lewej do prawej) i chciałbym, aby był on od góry do dołu. –

+0

Zmieniłem xiy w dwóch miejscach w productTree.js, jeden zrobił pionową strukturę drzewa, a drugi zrobił etykiety w odpowiednim miejscu. Niestety drzewo nie ma granicy, dlatego etykiety znajdują się jeden na drugim: / –