Examples of JS hierarchical tree with mixed canvas/DIV approach

Question

I am wishing to provide a visualisation of groups of data on a website, each containing multiple fields. The groups are related to other groups in a largely hierarchical fashion.

The Spacetree examples from the JavaScript InfoVis toolkit provide almost all functionality, with the major caveat that the entire graph is rendered to a canvas. Node types are therefore visually restricted to canvas drawing elements.

Instead, I'm looking for a library that allows <div>s to be rendered (each with my multiple fields, icons, Javascript functionality, etc.) and visually linked in a similar fashion to the Spacetree examples. Essentially, the general concept is similar to UML or database diagrams.

I suppose that I could just use the InfoVis toolkit, overlay my <div>s and limit interactivity, but I'm wondering if anyone has come across a library that does this out of the box (and preferably for free).

Answer 1

It's already doing just that! Looking at the example on the InvoVis site, there is a chunk of javascript which is actually constructing html nodes for the nodes shown on the screen. All you need to do, it seems, is modify that section to acquire your html chunk:

//This method is called on DOM label creation.  
//Use this method to add event handlers and styles to  
//your node.  
onCreateLabel: function(label, node){  
    label.id = node.id;              
    label.innerHTML = node.name;  
    label.onclick = function(){  
        st.onClick(node.id);  
    };  
    //set label styles  
    var style = label.style;  
    style.width = 40 + 'px';  
    style.height = 17 + 'px';              
    style.cursor = 'pointer';  
    style.color = '#fff';  
    //style.backgroundColor = '#1a1a1a';  
    style.fontSize = '0.8em';  
    style.textAlign= 'center';  
    style.textDecoration = 'underline';  
    style.paddingTop = '3px';  
},  

The important line is

label.innerHTML = node.name;