Geek Answers Handbook

Javascript library - family tree flowchart

I am looking for a simple Javascript library (svg?) That allows me to draw a family tree relationship.

I searched a lot on Google, found many interesting libraries such as Raphaël and its Dracula extension. Google has its own library for creating flowcharts.

Unfortunately, each library establishes a link between nodes with a sigle string. If A and B are related to C, I will get 2 rows: one from A to C and one from B to C.

I need a line from A to B (we call it AB) and a line from AB to C to represent a marriage from A and B.

Sample Image

Thanks.

+8
javascript graph
source share
3 answers

I have the same problem. Here is what I found:

Do you have any other solutions?

+3
source share

I developed Graphviz dot-file to generate such output. I am currently working on a Ruby script to generate this from a .gedcom file. enter image description here

Here, the contents of .dot, nodes with numbers, are just points and the correct flow paths.

digraph G { graph [nodesep=0.2,splines=ortho,ranksep=0.05] node [shape=box,fontname=Helvetica,fontsize=8;color="green",fixedsize=true,width=1,height=0.5,style=filled] Grandfather [color="lightblue"] Grandmother [color="pink"] StephGrandmother [color="pink"] Father [color="lightblue"] Mother [color="pink"] Uncle [color="lightblue"] Laurent [color="lightblue"] Child2 [color="lightblue"] Child3, Child4 [color="pink"] node[label="", width=0, height=0]; edge[arrowhead=none, color=blue]; {rank=same;StephGrandmother;Grandfather;Grandmother;Grandfather1} {rank=same;Father;Father1;Mother;Uncle} {rank=same;Laurent;Child2;Child3,Child4} {rank=same;Father2;Father3} StephGrandmother:e -> Grandfather:w Grandfather:e -> Grandfather1 Grandfather1 -> Grandmother:w Grandfather1 -> Grandfather2 Grandfather2 -> Father:n Grandfather2 -> Uncle:n Father:e -> Father1 Father1 -> Mother:w Father1 -> Father2 Father2:w -> Laurent:n Father2:w -> Child2:n Father2 -> Father3 Father3:e -> Child3:n Father3:e -> Child4:n }
0
source share

While not a "library", there is a utility that allows you to accurately draw what you describe. Called simply "SVG Utility", this is a free software with a graphic designer that allows you to define real family relationships (including multiple spouses, oriented children, etc.). See More About SVG Family Trees .

After development, the relationships and layout are recorded in a simple text file format so that they can be modified or reused. The utility generates a version of SVG for use on a blog or other web page. There are several possible configurations that allow you to display multiple SVG images on the same page, tooltips or tooltips behind personal boxes or "families", pan individual trees, thumbnails with captions, etc.

The installation kit, documentation, and samples are available in the Dropbox folder. Contact the author of the blog mentioned above to access it.

The utility was developed to work under Windows, but was also launched under the compatibility level with WINE on Mac.

0
source share

More articles:


All Articles