Geek asks and answers

Drawing root trees with KineticJS

There, the webapp I am developing needs to dynamically draw root, n-ary trees in order to outline the necessary relationships between the skills. Actually this is already happening, and you can see an example here . I am trying to improve it using the algorithm here in PyMag , and I have to admit that I got a little lost trying to figure out how to adapt it for my JavaScript code.

EDIT: Here is my current code for drawing these trees, from the Rails Rails part (I would paste the code here, but it's a little long).

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

  • gon.skills_map [0] is the name of the skill in the line
  • gon.skills_map [1] is the skill url so each node is clickable
  • gon.skills_map [2] is an array of props (this is what I call the opposite necessary) arrays in this exact same format
  • gon.skills_map [3] is an estimate of the premise relationship (which affects the line thickness)
+5
source share
1 answer

You can use the d3.js data visualization library This is a much better option than manually building a tree, especially when the graphics become more complex. d3 uses svg so you can have rich interactions with your schedule, such as clicking, freezing, dragging and dropping, etc.

You would need to convert your graph to the appropriate data structure, for example:

{
  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
    }
  ]
}

. d3 http://jsfiddle.net/atrniv/y8drq/2/

, d3, .

d3 - http://d3js.org/

+3

More articles:


All Articles