How to display a hierarchical skill tree in php
- by user3587554
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.
