infovis hypertree nodes on demand

Question

저는 Javascript Infovis Toolkit을 사용하는 데있어 매우 익숙합니다.하지만 5 개의 초기 노드가 중간에 연결된 하이퍼 트리를 만드는 것이 좋습니다. 그런 다음 사용자가 각 하위 노드를 클릭하면 하위 노드와 연결된 새 노드가 표시됩니다 (그 중 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(); 

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