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

TreeModel is really just a tool for the data structuring not visualization. You're better off with some graph ploting library for visualization - viz, cytoscape etc. You can write your own SVG/canvas drawer or map HTML elements to your elements but, like you said, that seems tedious. — Zed, Aug 27 '20 at 13:34
@Zed Uhh I think you may be incorrect. http://jnuno.com/tree-model-js/ It clearly shows a canvas diagram. Its suppose to build a canvas tree. There are also animations you can use. So either your right and the site is misleading or your just wrong. — numerical25, Aug 27 '20 at 14:22
@Italy I did post on git as well. The site actually said to come here for questions though. — numerical25, Aug 27 '20 at 14:22
@numerical25: that's just a demo of their model. The rendering is not part of the library, that's done with d3 there. See their gh-pages branch, their `main.js` there is *not TreeModel.js*: https://github.com/joaonuno/tree-model-js/blob/gh-pages/js/main.js, TreeModel.js is [included separately](https://github.com/joaonuno/tree-model-js/blob/gh-pages/index.html#L90). — Martijn Pieters, Aug 27 '20 at 14:42
@MartijnPieters Ok thanks. Well that is definitely not the solution I was looking for. I am already creating Binary Search Tree with PHP. I was hoping I could translate it to json and use something to actually render it so I can get a visual of my code. I will go ahead and close this issue out. — numerical25, Aug 27 '20 at 14:57
I actually am going to answer my question cause I think I found something that works — numerical25, Aug 27 '20 at 17:01

Dmitry · Answer 1 · 2020-08-27T13:30:26.360

0

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>

edited Aug 27 '20 at 13:30

answered Aug 27 '20 at 13:14

Dmitry

1,426
5
11

Thanks, it seems a little tedious but I will give it a try. – numerical25 Aug 27 '20 at 13:28
Yeah why is there no documentation that shows this ? Plus it appears on the website example that its using canvas to draw out the tree not html. why would i have to use html to style up the structure plus use javascript when its only going to end up using canvas ? – numerical25 Aug 27 '20 at 13:33
You don't have to. But you asked about HTML. Canvas element is whole another world which even can render 3D. – Dmitry Aug 27 '20 at 14:23
Yeah I would rather do it with Canvas. I was assuming I could do a getElementById and append it to a tag and the canvas would just be rendered within that tag. That was kind of what I was asking. How do I apply the javascript structure to a div. I want to do it exactly how it appears on the site http://jnuno.com/tree-model-js/ – numerical25 Aug 27 '20 at 14:33
The sample you've provided doesn't use canvas. Instead it uses SVG. But I really don't understrand why do think, that canvas or SVG would be easier to implement. Using simple HTML and simple CSS `padding-left` you can do the same thing in a minutes. – Dmitry Aug 27 '20 at 15:08
Yeah I know. I actually found something that will work that will save alot of headache. I actually got it to work so I am answering my question – numerical25 Aug 27 '20 at 17:01

score 0 · Answer 2 · answered Aug 27 '20 at 17:02

0

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/

answered Aug 27 '20 at 17:02

numerical25

10,524
36
130
209

How do you apply a TreeModel to an element?

2 Answers2