Javascript infovis超树节点点播

我对使用Javascript Infovis工具包很陌生，但我想做的是创建一个超级树，其中有五个初始节点连接到中间。然后，当用户单击每个子节点时，会出现连接到该子节点的新节点（其中6个）。但我不知道该怎么做。以下是我的树代码：

            //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();

//现在放入树和细节器
var infovis=document.getElementById（'infovis'）；
var w=infovis.offsetWidth，h=infovis.offsetWidth；
var ht=新的$jit.Hypertree({
//可视化容器的id
注入：“infovis”，
//通过设置overridable=true，
//节点和边全局属性可以是
//为每个节点/边重写。
节点：{
可重写：对，
“转换”：正确，
键入：“圆”，
},
边缘：{
可重写：对，
线宽：5，
颜色：“浅灰色”
},
//计算节点偏移量
偏移量：0.2，
//更改动画过渡类型
转换：$jit.Trans.Back.easeOut，
//动画持续时间（毫秒）
持续时间：1000，
//在标签创建时附加事件处理程序。
onCreateLabel:函数（doElement，节点）{
domeElement.innerHTML=node.name；
domeElement.style.cursor=“指针”；
doElement.onclick=函数（）{
ht.onClick（node.id{
希德拉贝尔斯：错，
onComplete:函数（）{
ht.controller.onComplete（）；
}
});
};
},
//移动/放置标签时调用此方法。
//可以在此处向标签添加一些定位偏移。
onPlaceLabel:函数（DomeElement，节点）{
变量宽度=doElement.offsetWidth；
var intX=parseInt（domeElement.style.left）；
intX-=宽度/2；
domeElement.style.left=intX+'px'；
},
onBeforeCompute:函数（节点）{
//淡出信息
$（“#内部细节”）。淡出（500）；
},
onComplete:函数（）{
//使关系列表显示在右栏中。
var node=ht.graph.getClosestNodeToOrigin（“当前”）；
var html=“”+node.name+”；
html+=“”+node.data.explauration+“
”
$jit.id（'internal-details'）。innerHTML=html；
//淡出信息
$（“#内部细节”）。fadeIn（500）；
}
});
//加载JSON图。
加载json（json，2）；
//计算位置并绘图
ht.refresh（）；

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);
        }
    });
}