JavaScript'i Özelleştirme Görselleştirme Araç Takımı Spacetree Düğümü

Question

Birçok kişinin org tablosu için JavaScript Görselleştirme Araç Takımı'nı (JIT) önerdiğini gördüm. Ben org grafik için SpaceTree JavaScript InfoVis Toolkit kullanmaya çalışıyorum. Kuruluş şemasındaki düğümler, çalışan profil resmine sahip olan, tıklatmada iki farklı simge ve ad, başlık ve rapor sayısına sahip 3 satırlık basit metin içeren bir bileşen gibidir. Her satır ayrıdır hafif yatay çizgi ile. Şunlar gibi:

Sorum şu: Spacetree düğümlerini böyle bir ölçüde özelleştirmek mümkün mü? Düğüm, neredeyse kendi oluşturma yöntemine sahip başka bir "bileşen" veya JavaScript nesnesi gibi olabilir mi?

Ben forumlarda araştırdım ve kabul bazı seçenekler şunlardır:

1. $ jit.ST.NodeTypes.implement() ... ama gördüğüm örneklere dayalı bu düğümünü özelleştirmede yardım gibi görünmektedir Şekil vb. bakımından, , yukarıda çizilen düzen gibi değil. Ben de example5.js içinde onCreateLabel yönteminde innerHTML ayarlamak çalıştı http://groups.google.com/group/javascript-information-visualization-toolkit/browse_thread/thread/a4a059cbeb10ba23/ebf472366cdbbdef?lnk=gst&q=spacetree+nodetype#ebf472366cdbbdef
2. : Ben özelleştirme gibi şey bahsediyorum ama hiçbir şey yapıyor gibi görünüyor. Bununla birlikte, bu 'un düğüm özelleştirmesinin iyi bir yolu olup olmayacağından emin değilim. Örnek5 JIT web sitesinde (birden fazla köprü yayınlamasına izin verilmiyor)
3. Grafiği Uzatmak ... Düğüm hala bu seçeneğe bakıyorum ve bu zaman noktası , ne kadar karmaşık olduğunu bilmiyorum ağaç kullanımı Graph.myNode alan ve Graph.myNode bile nasıl görünecek? numaralı telefonun bu satırlarda daha fazla düşünmesi ve hatta uygun olup olmadığına bakın.

Answer 1

NotDizinizi prototip atası haline getirebilir, istediğiniz yuvaları oluşturabilir ve ardından uygun render/force kodu özelleştirmelerini ekleyebilirsiniz.

Answer 2

Spacetree çok özelleştirilebilir. Düğümler istediğimiz görüntüleri veya herhangi bir şeyi görüntüleyebilir. Düğümler için özel tıklama etkinliklerine sahip olabiliriz. Özel etkinliklere sahip olmak için, onclick etkinliğinde tüm ağacı yeniden çizmeniz gerekecektir.

İşte bir örnek. Tıklama etkinliğinin başarı işlevi. İşte ad özelliği böyle bir görüntü vermek için kullanılabilir

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

"tıklanabilir" sınıfına click olayı çağrıda:

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

Mark kullanışlı eğer Yanıt olarak. Teşekkürler.

Answer 3

Spacetrees kullanıyorum ve etiket türünü HTML olarak belirledim (bu varsayılan değer) ve etiketlerinizi şekillendirmek için normal HTML ve CSS kullanabilirsiniz. Sana etiket çalışıyoruz vb

Not resimler, bağlar ve metin değil, düğümünü var. Düğüm, grafik bileşenidir; etiket, düğümü temsil eden görseldir.

siz "onCreateLabel" için fonksiyonunda spacetree geçiş hazrlarken: Yalnızca HTML5/Tuval ile çalışan sakıncası yoksa

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

, bu yanı http://orgplot.codeplex.com, basit bir arayüz desteği görüntü düğümü olarak denemek iyi.

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

});