JavaScript 시각화 툴킷 Spacetree 노드 사용자 정의하기

Question

많은 사람들이 JIT (JavaScript Visualization Toolkit)를 추천합니다. orgTypes에 대한 JavaScript InfoVis Toolkit의 SpaceTree를 사용하려고합니다. 내 조직도의 노드는 직원 프로필 사진, 클릭시 오버레이 및 이름, 제목 및 보고서 수를 갖는 간단한 텍스트 3 줄을 보여주는 두 개의 다른 아이콘이있는 구성 요소와 같습니다. 각 줄은 분리되어 있습니다. 가벼운 수평선에 의해. 뭔가 같은 :

나의 질문은, 그런 범위로 spacetree 노드를 사용자 정의 할 수 있습니까? Node가 다른 "구성 요소"또는 고유 한 렌더링 메서드가있는 JavaScript 객체와 거의 비슷합니까?

나는 포럼에서 연구되고 내가 생각 몇 가지 옵션은 다음과 같습니다

가

1. $ jit.ST.NodeTypes.implement이() ...하지만 내가 본 예에 따라,이 노드를 사용자 정의에 도움이 될 것 같다 도형 등의 측면에서는 위의 그림과 다르다. 나는에 example5.js에 onCreateLabel 방법에 innerHTML을 설정하려고 http://groups.google.com/group/javascript-information-visualization-toolkit/browse_thread/thread/a4a059cbeb10ba23/ebf472366cdbbdef?lnk=gst&q=spacetree+nodetype#ebf472366cdbbdef
2. : 나는 정의에 같은 것을 말하는거야 을하지만 아무것도하지 않는 것 같습니다. 하지만, 그 노드 이 노드 사용자 정의의 좋은 방법이 될지 확실하지 않습니다. Example5는 JIT 웹 사이트에 있습니다. (하나 이상의 하이퍼 링크를 게시 할 수 없습니다.)
3. Graph.Node 확장 ...이 옵션을 계속 살펴보고 있는데이 시점이 얼마나 복잡합니까? 그것은 공간을 가지고있다. Tree는 Graph.myNode를 사용하고 Graph.myNode는 어떤 모습 일까? I 그 라인에 대해 더 많이 생각하고 심지어 실행 가능한지 확인해야합니다.

Answer 1

여러분은 yourNode를 Graph.node의 조상의 프로토 타입으로 만들고 원하는 슬롯을 설정 한 다음 적절한 렌더/강제 코드 사용자 정의를 추가 할 수 있습니다.

Answer 2

Spacetree는 매우 맞춤 설정할 수 있습니다. 노드는 이미지 나 원하는 것을 표시 할 수 있습니다. 노드에 대한 맞춤 클릭 이벤트를 가질 수 있습니다. 커스텀 이벤트를 가지려면 onclick 이벤트에서 전체 트리를 다시 그려야합니다.

다음은 예입니다. 클릭 이벤트의 성공 함수. 저는 여기에 이름 속성은 다음과 같이 이미지를 제공 할 수 있습니다

 $.ajaxSetup({ cache: false });    
      $(".clickable").live("click", function() {    
      $.ajax({ 
       url: url + "?id=" + parentId + "&ts=" + new Date().getMilliseconds(), 
       type: "POST", 
       cache: false, 
       dataType: "html", 
       success: function (html) {      
        init(html);       
       } 
       }); 
      }); 

"클릭"클래스에 클릭 이벤트를 불렀다 :

{id:"90", name:"<a href='javascript:;' class='clickable' name='90'><img src='images/picture.gif' width='30' height='30' alt='pic' /></a>", data:{}, children:[]} 

마크 유용한 경우 답변으로. 감사.

Answer 3

spacetrees를 사용하고 있으며 레이블 유형을 HTML (기본값)로 설정하고 일반 HTML과 CSS를 사용하여 레이블을 스타일링 할 수 있습니다. 난 당신이 라벨와 함께 작업하는 등

참고 이미지, 링크, 텍스트가 아닌 노드 있습니다. 노드는 그래프 구성 요소입니다. 레이블은 노드를 나타내는 비주얼입니다.

는 "onCreateLabel"에 대한 함수에서 spacetree 패스를 초기화하면 : 당신은 HTML5/캔버스 작업 괜찮다면

var myOnCreateLabel = function(label, node) { 
    label.onclick = function(event) {/* setup onclick handler */}; 
    label.innerHTML = "<img src='myImage.png' />"; // use image in label 
}; 
var myST = new $jit.ST({/*other settings*/ onCreateLabel: myOnCreateLabel}); 

Answer 4

이뿐만 아니라 http://orgplot.codeplex.com, 간단한 인터페이스 지원 이미지 노드로 시도 잘.

Answer 5

this.st=new $jit.ST(

{

  onCreateLabel: function (label, node) 
      { 
       var labelContent = $('<table cellpadding="0" cellspacing="0" class="nodeContainer"><tr><td>' + 
        '<div class="buttonContainer">' + 
        '</div></td></tr><tr><td>' + 
        '<table class="nodeBox" cellpadding="0" cellspacing="0">' + 
        '<tr>' + 
        '<td class="iconTd"></td>' + 
        '<td class="center nodeName">' + node.name + '</td>' + 
        '</tr></table>' + 
        '</td></tr></table>'); 
       thisObject.onCreateLabel.raise(thisObject, { labelContent: labelContent, node: node }); 
       if (node.data && node.data.Icon && node.data.Icon != "") 
       { 
        labelContent.find(".iconTd").append($("<img src='" + node.data.Icon + "' alt=''>")); 
       } 
       else 
       { 
        labelContent.find(".iconTd").remove(); 
       } 

       var lblCtl = $(label).append(labelContent); 

       if (node.data.Data.ChildrenCount) 
       { 
        labelContent.append("<tr><td class='subnode'></td></tr>"); 
       } 
       if (node.name.length > 40) 
       { 
        lblCtl.attr("title", node.name); 
        node.name = node.name.substr(0, 37); 
        node.name = node.name + "..."; 
       }       
       lblCtl.click(function (sender) 
       { 
        //thisObject.isNodeClicked = true; 
        var target = $(sender.target); 
        if (!target.hasClass("subnode")) 
        { 
         if (thisObject.currentSelectedNode) 
         { 
          thisObject.currentSelectedNode.buttonContainer.hide(); 
         } 
         var btnContainer = labelContent.find(".buttonContainer"); 
         thisObject.currentSelectedNode = { nodeElement: lblCtl, node: node, buttonContainer: btnContainer, event: sender }; 
         btnContainer.append(thisObject.$globalButtonContainer.show()).show(); 
         var button = target.closest(".chartActionButton"); 
         if (button.length > 0) 
         { 
          thisObject.onNodeAction.raise(thisObject, { name: button.attr("name"), nodeElement: lblCtl, node: node, button: target }); 
         } 
         else 
         { 
          thisObject.onNodeClick.raise(thisObject, thisObject.currentSelectedNode); 
         } 
        } 
        else 
        { 
         thisObject.st.onClick(node.id); 
        } 
       }); 
       label.id = node.id; 
       //set label styles 
       thisObject.setNodeStyle(node.data.Style, label.style); 
      } 

});