Search code examples
javascripthtmlalgorithmtree

Draw tree structure in HTML

I'm doing a school assignment to visualize in-depth search algorithm and i'd like to visualize the tree javascript creates. I've written the javascript to implement in-depth search but i'm in trouble visualizing the tree.Currently i've created an object for a node which has attributes:

function createNode(parent,name,suur,vaike){
    var Node = new Object();
    Node["name"]= name;
    Node["children"] = [];
    Node["parent"] = parent;

    return Node;
}

In general it wouldn't be really difficult to draw a tree in HTML but i would like to get my head around it before i start writing any code for visualizing. The main issues i've stated is that the length of branches have to dynamically change - if new children are added to the tree then the tree will expand so different elements wouldn't collapse.

This is an image from Wikipedia and i'd love to get something like this as a result.

Tree structure

What my question is that i'd like to get some pointers how to dynamically expand the branch lengths so that different children wouldn't collapse.

Solution

  • For this particular task i used Treant.js. Really simple to use and drew nicely fitted tree. Had about 60 elements in the tree and no collision.

    Here's a little snip from the result (it's scrollable, couldn't fit all on one page)

    snipimage