Downloading childnode in Spacetree in infovis javascript

Question

I am new to java and javascript. I have used infovis Spacetree for building a tree. I want to make the children node of parent node downloadable. I mean when the user clicks chilnode 1 of Parent node 1 it should download a pdf file stored from root directory. Could anyone suggest me how can achieve that. Here is my javascript code for spacetree in infovis

var labelType, useGradients, nativeTextSupport, animate;

(function() {
  var ua = navigator.userAgent,
      iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
      typeOfCanvas = typeof HTMLCanvasElement,
      nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
      textSupport = nativeCanvasSupport 
        && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
   labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
  nativeTextSupport = labelType == 'Native';
  useGradients = nativeCanvasSupport;
  animate = !(iStuff || !nativeCanvasSupport);
})();
var Log = {
  elem: false,
  write: function(text){
    if (!this.elem) 
      this.elem = document.getElementById('log');
    this.elem.innerHTML = text;
    this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
  }
};
function init(){

    var json = {
        id: "node1",
        name: "Stocks",
        data: {},
        children: [{
            id: "node2",
            name: "Stock1",
            data: {},
            children: [{
                id: "node3",
                name: "A",
                data: {},
                children: [{
                    id: "node4",
                    name: "child 1",
                    data: {},
                    children: []
                }, {
                    id: "node5",
                    name: "child 2",
                    data: {},
                    children: []
                }, {
                    id: "node6",
                    name: "child 3",
                    data: {},
                    children: []
                }]                
            }]
        }]};        
    var st = new $jit.ST({      
        injectInto: 'infovis',     
        duration: 800,     
        transition: $jit.Trans.Quart.easeInOut,      
        levelDistance: 50,       
        Navigation: {
          enable:true,
          panning:true
        },
            Node: {
            height: 20,
            width: 100,
            type: 'rectangle',
            color: '#aaa',
            overridable: true
        },
         Edge: {
            type: 'bezier',
            overridable: true
        },
        onBeforeCompute: function(node){
            Log.write("loading " + node.name);
        },

        onAfterCompute: function(){
            Log.write("done");
        },
        onCreateLabel: function(label, node){
            label.id = node.id;            
            label.innerHTML = node.name;
            label.onclick = function(){
                if(normal.checked) {
                  st.onClick(node.id);
                } else {
                st.setRoot(node.id, 'animate');
                }
            };
            var style = label.style;
            style.width = 60 + 'px';
            style.height = 17 + 'px';            
            style.cursor = 'pointer';
            style.color = '#333';
            style.fontSize = '0.8em';
            style.textAlign= 'center';
            style.paddingTop = '3px';
        },
        onBeforePlotNode: function(node){
            if (node.selected) {
                node.data.$color = "#ff7";
            }
            else {
                delete node.data.$color;

                if(!node.anySubnode("exist")) {

                    var count = 0;
                    node.eachSubnode(function(n) { count++; });
                    node.data.$color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'][count];                    
                }
            }
        },
        onBeforePlotLine: function(adj){
            if (adj.nodeFrom.selected && adj.nodeTo.selected) {
                adj.data.$color = "#eed";
                adj.data.$lineWidth = 3;
            }
            else {
                delete adj.data.$color;
                delete adj.data.$lineWidth;
            }
        }
    });
    st.loadJSON(json);   
    st.compute();  
    st.geom.translate(new $jit.Complex(-200, 0), "current");   
    st.onClick(st.root);   
    var top = $jit.id('r-top'), 
        left = $jit.id('r-left'), 
        bottom = $jit.id('r-bottom'), 
        right = $jit.id('r-right'),
        normal = $jit.id('s-normal');  
    function changeHandler() {
        if(this.checked) {
            top.disabled = bottom.disabled = right.disabled = left.disabled = true;
            st.switchPosition(this.value, "animate", {
                onComplete: function(){
                    top.disabled = bottom.disabled = right.disabled = left.disabled = false;
                }
            });
        }
    };
    top.onchange = left.onchange = bottom.onchange = right.onchange = changeHandler;
}

Kindly guide me

Answer 1

You can configure Space-tree with http://philogb.github.io/jit/static/v20/Docs/files/Visualizations/Spacetree-js.html

You can also try something like this:

onCreateLabel: function(label, node){
        ...

        label.innerHTML = '<a href="">download file</a>'; 

        ...
    }

Or make JSON like:

{
"id": "Regions",
"name": "Regions<a href=Regions.aspx>XYZ</a>",
"data": {},
"children": []
}