infovis 자바 스크립트에서 Spacetree에서 childnode 다운로드

Question

나는 자바와 자바 스크립트를 처음 사용합니다. 나는 나무를 짓기 위해 infovis Spacetree를 사용했다. 부모 노드의 자식 노드를 다운로드 가능하게 만들고 싶습니다. 사용자가 부모 노드 1의 chilnode 1을 클릭하면 루트 디렉토리에 저장된 pdf 파일을 다운로드해야합니다. 아무도 저에게 어떻게 그것을 얻을 수 있다고 제안 할 수 있습니까?

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

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

     ... 
    } 

: 여기 spacetree 내 자바 스크립트 코드가 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; 
} 

에 친절하게 나를

Answer 1

당신은 당신이 뭔가를 시도 할 수 있습니다 http://philogb.github.io/jit/static/v20/Docs/files/Visualizations/Spacetree-js.html

공간 트리를 구성 할 수 있습니다 안내 JSON을 다음과 같이 설정하십시오.

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