Próbuję użyć układu drzewa D3, aby utworzyć drzewo genealogiczne, a jedną z rzeczy, które zauważyłem, jest to, że gdy mam wiele węzłów dziecięcych, rozciągnie się poziomo na ekranie. Idealnie chciałbym bardziej pionowy układ dla tych węzłów, aby ludzie nie musieli przewijać ekranu i mogli po prostu patrzeć w dół drzewa.

Oto, co aktualnie widzę:

Teraz może nie być tak źle, ale gdybym powiedział 20 dzieci, to obejmowałoby cały ekran i tego chciałbym uniknąć.

Widziałem takie pytaniato ale to mi nie pomaga, ponieważ chcę określonego układu, a nie po prostu zmiany rozmiaru ... Mam duże węzły i zaczynają się zderzać ze sobą, gdy próbuję dynamicznie zmieniać rozmiar drzewa - zmniejszanie drzewa mnie nie robi dobrze.Szczególnie potrzebuję innego układu dla sytuacji, w których jest więcej niż pewna liczba dzieci.

Oto coś, na co miałem nadzieję. Zauważ, że root nie tworzy tego formatu, ponieważ ma tylko 4 dzieci. Idealnie chciałbym, aby w przypadku, gdy rodzic ma 5 lub więcej dzieci, efektem tego byłby poniższy układ. Gdyby root miał 5 dzieci, skutkowałoby to tym układem, a układ powinien po prostu rozciągnąć się pionowo, gdyby użytkownicy chcieli zobaczyć wnuki roota (węzły A, B, C ...). Jeśli to konieczne, mogę uzyskać schemat działania:

znalazłempół-podobne pytanie dotyczące niestandardowych układów dzieci i powiedział, że musi się bawić z rzeczywistym kodem d3js. Chciałbym tego uniknąć, więc mam nadzieję dowiedzieć się, czy jest to możliwe dzięki d3js takim, jakie jest teraz, a jeśli tak, to jak się do tego zabrać? Nie potrzebuję kompletnej odpowiedzi, ale fragment kodu potwierdzający, że jest to możliwe, byłby bardzo pomocny.

Jeśli to konieczne, mogę przesłać JSFiddle, aby ludzie mogli się bawić.