Drawing a family tree with Phaser

[wonderfulworld]

I'm working on a family tree graph looking similar to what you see in the attachment. I have the JSON data and the relationships between people as shown below:

{ id: 1, name: "Me", parents: [3,4] }{ id: 2, name: "My Wife" }{ id: 3, name: "My Dad", parents: [5,6] }{ id: 4, name: "My Mom" }{ id: 5, name: "My Dads Dad", parents: [7,8] }{ id: 6, name: "My Dads Mom" }

I researched into few different ways to effectively draw this graph. The first attempt was to use SVG. Drawing the dad-son relation was easy with Y coordinates. But finding the X coordinates is tough. Especially placing the nodes (boxes) efficiently on the screen to use maximum screen space and better user experience. A good example is drawing me and my brother with my dad and mum versus​ me with my dad and mum.

 

• Is Phaser a solution to the problem that I'm trying to solve which is to dynamically place the nodes based on the dad-son or me-brother-dad-son relation?
• Is finding the geometrical coordinates and placing the nodes is the solution to this problem if I can't use Phaser? Is there any other branch in mathematics or physics that I use to solve this problem?

 

There is a good example to draw a family tree with D3.JS is on this page.

[taijoe]

 

On 8/11/2015 at 8:01 PM, wonderfulworld said:

I'm working on a family tree graph looking similar to what you see in the attachment. I have the JSON data and the relationships between people as shown below:

{ id: 1, name: "Me", parents: [3,4] }{ id: 2, name: "My Wife" }{ id: 3, name: "My Dad", parents: [5,6] }{ id: 4, name: "My Mom" }{ id: 5, name: "My Dads Dad", parents: [7,8] }{ id: 6, name: "My Dads Mom" }

I researched into few different ways to effectively draw this graph. The first attempt was to use SVG. Drawing the dad-son relation was easy with Y coordinates. But finding the X coordinates is tough. Especially placing the nodes (boxes) efficiently on the screen to use maximum screen space and better user experience. A good example is drawing me and my brother with my dad and mum versus me with my dad and mum.

 

• Is Phaser a solution to the problem that I'm trying to solve which is to dynamically place the nodes based on the dad-son or me-brother-dad-son relation?
• Is finding the geometrical coordinates and placing the nodes is the solution to this problem if I can't use Phaser? Is there any other branch in mathematics or physics that I use to solve this problem?

 

There is a good example to draw a family tree with D3.JS is on this page.

• Can you give me the code of it?