How to display a hierarchical skill tree in php

Question

If I have skill data set up in a tree format (where earlier skills are prerequisites for later ones), how would I display it as a tree, using php? The parent would be on top and have 3 children. Each of these children can then have one more child so its parent would be directly above it.

I'm having trouble figuring out how to add the root element in the middle of the top div, and the child of the children below each child of the root. I'm not looking for code, but an explanation of how to do it. My data in array form is this:

Data:

Array
(
    [1] => Array
        (
            [id] => 1
            [title] => Jutsu
            [description] => Skill that makes you awesomer at using ninjutsu
            [tiers] => 1
            [prereq] => 
            [image] => images/skills/jutsu.png
            [children] => Array
                (
                    [2] => Array
                        (
                            [id] => 2
                            [title] => fireball
                            [description] => Increase your damage with fire jutsu and weapons
                            [tiers] => 5
                            [prereq] => 1
                            [image] => images/skills/fireball.png
                            [children] => Array
                                (
                                    [5] => Array
                                        (
                                            [id] => 5
                                            [title] => pin point
                                            [description] => Increases jutsu accuracy
                                            [tiers] => 5
                                            [prereq] => 2
                                            [image] => images/skills/pinpoint.png
                                        )

                                )

                        )

                    [3] => Array
                        (
                            [id] => 3
                            [title] => synergy
                            [description] => Reduce the amount of chakra needed to use ninjutsu
                            [tiers] => 1
                            [prereq] => 1
                            [image] => images/skills/synergy.png
                        )

                    [4] => Array
                        (
                            [id] => 4
                            [title] => ebb & flow
                            [description] => Increase the damage of water jutsu, water weapons, and reduce the damage of jutsu and weapons that use water element
                            [tiers] => 5
                            [prereq] => 1
                            [image] => images/skills/ebbandflow.png
                            [children] => Array
                                (
                                    [6] => Array
                                        (
                                            [id] => 6
                                            [title] => IQ
                                            [description] => Decrease the time it takes to learn a jutsu
                                            [tiers] => 5
                                            [prereq] => 4
                                            [image] => images/skills/iq.png
                                        )

                                )

                        )

                )

        )

)

An example would be this demo image minus the hover stuff.

Answer 1

I think your trouble mostly stem from trying to do this in a more automatic fashion than what is feasible.

I assume you want to end up with a skill tree where the skills have static positions, by far the easiest way to achieve that is to set those positions manually. Once you have decided what skills you want to have and what their dependencies should be, take a piece of paper and try drawing the skill tree until you have a visually pleasing and functional graph. Now you can simply give every skill a coordinate set according to its position on the graph.

I don't see any reason for arranging your data structure as a tree, put the skill objects on a flat list and make a field on each object detailing its dependency, or dependencies (You already made that field for some reason, despite being redundant in your current data structure).