Personalizar JavaScript Visualization Toolkit Spacetree Node

Question

Vi a mucha gente que recomienda JavaScript Visualization Toolkit (The JIT) para el organigrama. Estoy tratando de usar SpaceTree of JavaScript InfoVis Toolkit para el organigrama. Los nodos en mi organigrama son como un componente en sí mismo que tiene una foto de perfil de empleado, dos iconos diferentes que muestran superposiciones al hacer clic y unas 3 líneas de texto simple con nombre, título y número de informes ... cada línea está separada por una línea horizontal ligera. Algo como:

Mi pregunta es, ¿es posible personalizar los nodos de espacio libre a tal extensión? ¿Puedo tener Node casi como otro "componente" o objeto de JavaScript que tiene su propio método de renderizado?

he investigado en los foros y algunas opciones que se consideran son:

1. $ jit.ST.NodeTypes.implement() ... pero en base a ejemplos que he visto, esta parecen estar ayudando en la personalización de nodo en términos de formas, etc. pero no me gusta el diseño dibujado arriba. Me refiero a la personalización algo como: http://groups.google.com/group/javascript-information-visualization-toolkit/browse_thread/thread/a4a059cbeb10ba23/ebf472366cdbbdef?lnk=gst&q=spacetree+nodetype#ebf472366cdbbdef
2. traté de establecer innerHtml en el método onCreateLabel en example5.js en: pero parece no estar haciendo nada. Aunque, no estoy seguro si ese será una buena forma de personalización de nodo. Ejemplo5 es en el sitio web de JIT (No tengo permiso para publicar más de un hipervínculo)
3. Extendiendo Graph.Node ... Todavía estoy investigando esta opción y es este punto del tiempo, no sé qué tan complicado es tener espacio en el árbol , use Graph.myNode y ¿qué aspecto tendrá Graph.myNode? I necesito pensar más en esas líneas y ver si es factible.

Answer 1

Puede hacer que suNodo sea el antecesor prototipo de Graph.node, configure las ranuras que desee y luego agregue las personalizaciones apropiadas de render/force code.

Answer 2

El Spacetree se puede personalizar mucho. Los nodos pueden mostrar imágenes o cualquier cosa que deseamos. Podemos tener eventos de clics personalizados para los nodos. Para tener eventos personalizados, tendrá que volver a dibujar todo el árbol en el evento onclick.

Aquí hay un ejemplo. En la función de éxito del evento click. Aquí he llamado el evento click en la clase "hacer clic"

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

La propiedad nombre se puede utilizar para dar la imagen como esta:

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

Marcar como respuesta si se considera oportuno. Gracias.

Answer 3

Estoy usando spacetrees y acabo de establecer el tipo de etiqueta en HTML (que es el valor predeterminado) y puedes usar HTML y CSS normales para dar estilo a tus etiquetas. Tengo imágenes, enlaces, textos, etc.

Tenga en cuenta que usted está trabajando con la etiquetay no el nodo. El nodo es el componente gráfico; la etiqueta es la visual que ves que representa el nodo.

Al inicializar el pase SpaceTree en una función de "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

si no le importa trabajar sólo con HTML5/lienzo, probar esto, así http://orgplot.codeplex.com, interfaz simple nodo de soporte de imagen como bien.

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

});