avatar Tomasza Cekało

Drzewo genealogiczne

W tym odcinku odpoczniemy od aplikacji kafelkowej, by zaprezentować jak powstała strona rodziny Cekało.

Użyte technologie

Szukając czegoś prostego w końcu zdecydowałem się na dTree.js. Jest to małą biblioteka budująca odpowiednie drzewo hierarchiczne biblioteki d3.js. Samo dTree wymaga właśnie wspomnianego d3.js jak i lodash.js. Więcej o dTree można przeczytać na oficjalnej stronie , projekt znajduje się też na github . Jest też oficjalne demo na > JSFiddle . Oprócz dTree i jego wymaganych bibliotek nie używałem nic innego, jedynie własne skrypty i style.

Jak wyglądał mój proces w tworzeniu strony?

Przede wszystkim zacząłem od skopiowania kodu z dema JSFiddle. Struktura drzewa jest opisywana za pomocą JSON. Chcąc jak najszybciej zobaczyć wyniki pracy zacząłem modyfikować jego strukturę tak, by na ekranie pojawiła się moja rodzina :). Jedną funkcjonalnością, która jest w tej bibliotece a z której nie skorzystałem, jest opcja wielu małżeństw. Następnie rozdzieliłem cały kod strony, który był w jednym pliku na html, css i js. w js oprócz jsona zmodyfikowałem jeszcze kod odpowiedzialny za init drzewa tak, by był szeroki na całą stronę:

 	 		width: document.body.clientWidth-33, 	 

Zmiany w stylach też były lekko kosmetyczne, domyślne ustawienia powodowały, że ten graf wyglądał inaczej na chrome i firefox, wystarczyło dodać:

 	 		.man, .woman{
height: auto !important;
width: auto !important;
}
p {
padding: 1px;
}

I to wszystko :). Cała strona jest dostępna pod adresem CEKALO.PL . Tam też można podejrzeć kod aplikacji. Myślę, że jej kod nie będzie się zbytnio zmieniał, jedynie struktura wyświetlanego drzewa genealogicznego. Zastanawiam się jeszcze nad dodawaniem dodatkowych informacji do poszczególnych osób, oczywiście za ich zgodą, takich jak odnośniki do profili społecznościowych i stron internetowych. A w międzyczasie idę polować na informacje o swoich przodkach :).

Web Statistics