定製JavaScript可視化工具包Spacetree節點

Question

我看到很多人推薦JavaScript可視化工具包（The JIT）for org chart。我正在嘗試爲組織結構圖使用JavaScript的InfoVis Toolkit的SpaceTree。我的組織結構圖中的節點本身就像一個組成部分，其中包含員工個人資料圖片，兩個不同的圖標顯示點擊上的重疊和約3行簡單文本，其中包含姓名，職位和報告數量......每行都是分開的由輕的水平線。是這樣的：

我的問題是，是否有可能自定義這樣的空間樹節點？我可以讓Node幾乎像另一個具有自己渲染方法的「組件」或JavaScript對象嗎？

我研究了論壇和一些我考慮的選項有：

1. $ jit.ST.NodeTypes.implement（）...但基於例子我看到的，這似乎 定製節點是幫助在形狀等方面但 不喜歡以上繪製的佈局。我指的是定製 類似： http://groups.google.com/group/javascript-information-visualization-toolkit/browse_thread/thread/a4a059cbeb10ba23/ebf472366cdbbdef?lnk=gst&q=spacetree+nodetype#ebf472366cdbbdef
2. 我試圖在example5.js設置的innerHTML在onCreateLabel方法： 但似乎無所事事。雖然，我不確定這個 是否會成爲節點定製的好方法。示例5是在JIT網站上（我不允許發佈超過一個超鏈接）
3. 擴展Graph.Node ...我仍在研究這個選項，並且它在這個時間點上，我不知道有多複雜它是有空間 樹使用Graph.myNode和Graph.myNode甚至會是什麼樣子？ I 需要更多地考慮這些方面，看看它是否可行。

Answer 1

你可以讓你的節點成爲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);       
       } 
       }); 
      }); 

name屬性可以用來給像這樣的「點擊」：

{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

我使用的是空間樹，我只是將標籤類型設置爲HTML（這是默認設置），您可以使用普通的HTML和CSS來設置標籤的樣式。我有圖片，鏈接，文字等

注意你與標籤工作，而不是節點。節點是圖形組件;標籤是您看到的代表節點的視覺。

當你初始化函數的spacetree通行證「onCreateLabel」：

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

，如果你不介意的話，只有HTML5/Canvas打交道，這種嘗試也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); 
      } 

}）;