javascript - 按需 infovis 超树节点

Question

我对使用 Javascript Infovis Toolkit 还很陌生，但我想做的是创建一个 super 树，其中五个初始节点连接到中间。然后，当用户单击每个子节点时，会出现连接到该子节点的新节点(其中 6 个)。但我不知 Prop 体该怎么做。这是我的树代码:

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