Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Drawing a family tree with Phaser


wonderfulworld
 Share

Recommended Posts

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.

post-15892-0-22891000-1439297154.png

Link to comment
Share on other sites

  • 1 year later...


 

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.

post-15892-0-22891000-1439297154.png

  • Can you give me the code of it?
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...