How to display a hierarchical skill tree in php
        Posted  
        
            by 
                user3587554
            
        on Game Development
        
        See other posts from Game Development
        
            or by user3587554
        
        
        
        Published on 2014-05-10T05:39:16Z
        Indexed on 
            2014/06/09
            15:43 UTC
        
        
        Read the original article
        Hit count: 400
        
php
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. 
© Game Development or respective owner