infovis hypertree nodes on demand

Question

I'm quite new to using the Javascript Infovis Toolkit, but what I'd like to do is create a hyper tree with five initial nodes connected to the middle. Then as the user clicks on each of the child nodes, new nodes connected to the child appear (6 of them). I can't figure out exactly how to do it though. Here is my code for the tree:

            //now puts in tree and detailer
        var infovis = document.getElementById('infovis');
        var w = infovis.offsetWidth, h = infovis.offsetHeight;

        var ht = new $jit.Hypertree({
            //id of the visualization container  
            injectInto: 'infovis',
            //By setting overridable=true,  
            //Node and Edge global properties can be  
            //overriden for each node/edge.  
            Node: {
                overridable: true,
                'transform': true,
                type: 'circle',
            },

            Edge: {
                overridable: true,
                lineWidth: 5,
                color: "lightgrey"
            },
            //calculate nodes offset  
            offset: 0.2,
            //Change the animation transition type  
            transition: $jit.Trans.Back.easeOut,
            //animation duration (in milliseconds)  
            duration: 1000,

            //Attach event handlers on label creation.  
            onCreateLabel: function (domElement, node) {
                domElement.innerHTML = node.name;
                domElement.style.cursor = "pointer";
                domElement.onclick = function () {
                    ht.onClick(node.id, {
                        hideLabels: false,
                        onComplete: function () {
                            ht.controller.onComplete();
                        }
                    });
                };
            },
            //This method is called when moving/placing a label.  
            //You can add some positioning offsets to the labels here.  
            onPlaceLabel: function (domElement, node) {
                var width = domElement.offsetWidth;
                var intX = parseInt(domElement.style.left);
                intX -= width / 2;
                domElement.style.left = intX + 'px';
            },

            onBeforeCompute: function (node) {
                //fades info out
                $("#inner-details").fadeOut(500);
            },

            onComplete: function () {
                //Make the relations list shown in the right column.  
                var node = ht.graph.getClosestNodeToOrigin("current");
                var html = "<h2>" + node.name + "</h2>";
                html += "<p>" + node.data.Explanation + "</p>"
                $jit.id('inner-details').innerHTML = html;

                //fades info out
                $("#inner-details").fadeIn(500);


            }
        });



        //load JSON graph.  
        ht.loadJSON(json, 2);
        //compute positions and plot  
        ht.refresh();

Answer 1

Get data of first level only when user click on node then ajax call
get that node childrens data.  
var lastClickedNode = '';
onCreateLabel: function(domElement, node) {
    domElement.innerHTML = node.name;
    $jit.util.addEvent(domElement, 'click', function() {
        if (lastClickedNode == node) {
            return;
        }
        lastClickedNode = node;
        if (node.children.length == 0 && node.hasFurtherData) {
            $.ajax({
                url: "apiurl/" + node.id,
                method: "GET",
                crossDomain: true,
                dataType: "json",
                contentType: 'application/json',
                beforeSend: function(xhr) {
                    xhr.setRequestHeader('Access-Control-Allow-origin', '*');
                },
                header: {
                    "Content-Type": "application/json",
                    "Accept": "text/javascript; charset=utf-8"
                },
                success: function(data) {
                    ht.op.sum(data, {
                        type: 'replot',
                        hideLabels: true,
                        transition: $jit.Trans.Back.easeInOut
                    });
                    ht.refresh();
                    ht.onClick(node.id);
                }
            });
        } else {
            ht.onClick(node.id);
        }
    });
}