Family tree display

Question

I am creating a family tree program. My question is how do I host nodes? Initially, I positioned the root in the center of my screen, and it works fine if it is a perfect binary tree, and the levels are much smaller. However, this is not most often. This is a sample of a tree: -

A BC DEFIJ KLNO 

As you can see, the main problem is with the location of the nodes. If a node has many children, and next to it node also has many children, they tend to overlap . (MAIN PROBLEM) I am using absolute node positioning using Canvas in Silverlight. If you are not a Silverlight developer, you can not worry about the Silverlight and Canvas parts. I just need the logic of the location of the nodes.

The height of the tree can be easily calculated, knowing the total number of levels of the tree, but the width of the tree is what bothers me. How can I calculate the width of a tree (total canvas width)

Can someone give me some general recommendations on how to set the width of the canvas and what logic will work ideally for positioning nodes.

NOTE: - I do not ask for the whole algorithm, and this is not my homework. I already have an algorithm and a database. I just need a guide for the positional part of node.

Thank you in advance:)

Answer 1

If you implement the function: width(node) for an arbitrary node of this tree, it’s easy to place each node

This function can be defined recursively:
- for a tree with a height of 1 this is a tree, this is exactly the length of this node
- for a tree with a height greater than 1, this is the sum of the lengths of all direct children of this node (plus some spaces in between)

Answer 2

I would suggest zooming in and out to unlock the Real Estate GUI.

A Node with a lot of children can be grouped, and a special icon denoting it can be enlarged to the next level, it will be fine, I feel, as the family grows, as the user can get a big picture first, and then can scale any branch he wants too.

Take hints from the google map user interface can help.

Answer 3

I would recommend starting with the widest level of wood if you want to guess the width of the canvas. You can calculate by walking across the width of the tree. Multiply the number of nodes at this level by the amount of side space that each node requires, and you have the width of the canvas that you need.

However, this does not guarantee that neighboring nodes at the widest level will not have many children. Thus, in order to complete the interval without overlapping, start by positioning the leaves of the tree at the deepest level and go backwards by adding the parents above and putting the leaves in between and on the sides.