Solved

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

Posted on 2016-11-28
6
65 Views
Last Modified: 2016-11-29
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.
0
Comment
Question by:toshi_
  • 3
  • 2
6 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41904138
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
 

Author Comment

by:toshi_
ID: 41904143
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
 
LVL 7

Accepted Solution

by:
James Bilous earned 500 total points
ID: 41904382
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41904460
@toshi_ - can you explain your choice of answer please.
1
 

Author Comment

by:toshi_
ID: 41905660
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41905688
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

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now