is there an easy way to draw a tree with javascript ? what lib would be the one to use ?

hello,

i'd like to draw a tree with data that i have in a table.

the table has the following columns :

id; nodename; parentID.
1; nodetop; 0
2: nodeFirstA:1
3: nodeFirstB:1
4: nodeFirstC:1
5: nodeSecondA:2
6: nodeSecondB:2
....


is there some easy way for drawing trees with such data ?

thank you in advance.
Erwin PombettAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
James BilousConnect With a Mentor Software EngineerCommented:
toshi_, Julian is saying that you will need to use a javascript library that provides the "function" which draws the tree since javascript does not have this function built in as part of its default implementation.

You will most likely have to reorganize your array of data into a format that suits whatever library you use. This library: http://sigmajs.org/ , for example, requires data to be formatted as a JSON object. Google "graph visualization javascript library" and do some research to figure out which one best suits your needs.
0
 
Julian HansenCommented:
JavaScript does not natively support such an operation but there are many libraries available on the net that do this.

Search for JavaScript Tree should yield a few.

Here is one that renders out a directory type tree
https://www.jstree.com/
0
 
Erwin PombettAuthor Commented:
Hello Julian,

of course i dont expect javascript to pass a query to the db.

i can create an array with those values in order to pass them to a js function to have the tree draw.

is there such a function that would help to draw this tree ?

thanks
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
Julian HansenCommented:
@toshi_ - can you explain your choice of answer please.
1
 
Erwin PombettAuthor Commented:
Hello Julian,

Of course i can explain my choice.

your 1st. sentence :
"JavaScript does not natively support such an operation but there are many libraries available on the net that do this."
you can replace Javascript with any language and the sentence still be acceptable by anyone.....kind of bot's sentence.

your 2nd sentence :
"Search for JavaScript Tree should yield a few."
makes me think about that old website "doyouwantmetogooglethatforyou"

your proposal :
Here is one that renders out a directory type tree https://www.jstree.com/
kind of realization of 2nd sentence.


Now, look at your avatar and compare it with that beauty and colorfull james' avatar...no comparaison

yourself: black t-shirt, serious, looking in front of you as if you were chasing :)
james : colorfull, shini stars in the background, looking at the sky as with hope ....and that wonderfull sky :)  

i hope it helps and you now understand my choice.

best regards,

Toshi
1
 
Julian HansenCommented:
Thanks Toshi_ I will endeavour to colourise my avatar to make my posts more technically relevant.

Suggestion for the future: if you want a detailed answer try giving more detail in your question - it was somewhat open ended hence the reply you received. Without knowing the kind of tree you want to draw it is is a bit like saying what are the best tyres for my car but not telling us what car you drive or what you use it for.
is there some easy way for drawing trees with such data ?
The answer is yes - literally hundreds of ways - which one is right for you - well you did not give enough information.

The accepted answer does not really provide any more information than the first so it would seem the Avatar approach to selecting answer is the valid one here.

Good luck with your project.
1
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.