Drawing rooted trees with KineticJS

Question

There's a webapp I'm developing that needs to draw rooted, n-ary trees dynamically, to map out the prerequisite relationships between skills. It actually already does this and you can see an example here. I'm trying to improve it though, using the algorithm laid out here in PyMag and I must admit, I'm a bit lost trying to figure out how to adapt it for my JavaScript code.

EDIT: Here is my current code for drawing these trees, from a Rails ERB partial (I would paste the code here, but it's a bit lengthy).

For those who do check out my code,gon.skills_map is an array in this format:

gon.skills_map[0] is the title of the skill in a string
gon.skills_map[1] is the URL of the skill, so that each node is clickable
gon.skills_map[2] is an array of postrequisite (it's what I'm calling the opposite of a prerequisite) arrays in this exact same format
gon.skills_map[3] is the rating of the prerequisite relationship (which influences line thickness)

http://stackoverflow.com/questions/12327055/recursively-display-n-ary-tree is on option, just integrate your kineticjs into it. — SoluableNonagon, Jan 29 '13 at 20:10
@EliteOctagon My current implementation works better than that example unfortunately. Like I said, I already have this working - the resulting trees simply aren't as pretty or space-efficient as they could be if I could figure out how to incorporate the better algorithm that I linked to. — Chris Fritz, Jan 29 '13 at 20:48
It was just deleted by a moderator. No idea why, OP said the answer looked "pretty ideal"..? — Ecir Hana, Feb 02 '13 at 18:13
My bet is the rule _barely more than a link to an external site_ (see [here](http://stackoverflow.com/faq#deletion)) applied. — Stefan Hanke, Feb 02 '13 at 19:58
Hmm... I really appreciated the research put into the previous answer and it _was_ "barely more than a link", but it also was a great resource that does exactly what I need. I wasn't expecting anyone to do most of my work for me, like @JohnnyJose has now done, but I suppose it is technically a more thorough answer. — Chris Fritz, Feb 03 '13 at 15:24

score 3 · Accepted Answer · answered Feb 02 '13 at 16:22

You could use the d3.js data visualization library. Its a much better option than manually constructing the tree especially when the graphs get more complicated. d3 uses svg so you can have rich interactions with your graph like click, hover, drag etc.

You would need to transform your graph into the appropriate data structure though like so:

{
  title: 'Skill A',
  url: 'http://skilla.com',
  children: [
    {
      title: 'Skill B',
      url: 'http://skillb.com',
      rating: 3,
      children: [
        {
          title: 'Skill D',
          url: 'http://skilld.com',
          rating: 5
        }, 
        {
          title: 'Skill E',
          url: 'http://skilld.com',
          rating: 10
        }
      ]
    },
    {
      title: 'Skill C',
      url: 'http://skillc.com',
      rating: 1
    }
  ]
}

Here the rating shows the level of dependency on the parent skill. I've created a sample skill tree with d3 in this fiddle http://jsfiddle.net/atrniv/y8drq/2/

Additionally if you can pick up d3, you can create multiple different visualizations from the same dataset of skill dependencies.

d3 website - http://d3js.org/

Drawing rooted trees with KineticJS

1 Answers1