How do you apply a TreeModel to an element?

Question

I am using the library TreeModel. It has great documentation except for the fact that it doesnt show how to actually show the tree in the html ? Does anyone have a clue ?

I'm doing this cause I am practicing my data structures in building a Binary Search Tree and I would like to see visually how my code is written out. TreeModel seems to be the best option.

Thanks

Answer 1

HTML-document itself is a tree of nodes (elements). So if you need to display your tree, you should create same tree using HTML elements.

E.g.

var myTree = {
  title: 'Root',
  children: [
    {
      title: 'child-1',
    }, {
      title: 'child-2',
    }
  ]
};

is equivalent to something like this:

<div class="node">
  <p>Root</p>
  <div class="nodes">
    <div class="node">
      <p>child-1</p>
    </div>
    <div class="node">
      <p>child-2</p>
    </div>
  </div>
</div>

Answer 2

I found a solution that will work. All I needed was something that draws out a diagram for my Binary Tree. This works great. The application I posted for wasn't exactly what I wanted but this works just fine.

https://fperucic.github.io/treant-js/