Personnalisation du noeud Spacetree de la boîte à outils de visualisation JavaScript

Question

J'ai vu beaucoup de gens recommandent JavaScript Visualization Toolkit (Le JIT) pour l'organigramme. Je suis en train d'utiliser SpaceTree de JavaScript InfoVis Trousse d'outils pour l'organigramme. Les nœuds dans mon organigramme est comme un composant en lui-même qui a employé photo de profil, deux icônes qui s'affichent en superposition dans cliquez et 3 lignes de texte simple d'avoir le nom, le titre, et le nombre de rapports ... chaque ligne est séparé par une petite ligne horizontale. Quelque chose comme:

Ma question est, est-il possible de personnaliser le spacetree des nœuds à une telle mesure? Puis-je avoir Nœud presque comme un autre "composant" ou un objet JavaScript qui dispose de sa propre méthode de rendu?

J'ai fait des recherches sur les forums et les quelques options que j'ai pris en considération sont:

1. $jit.ST.NodeTypes.mettre en œuvre() ... mais en se fondant sur des exemples que j'ai vu, ce semblent être les aider dans la personnalisation de nœud en termes de formes, etc, mais pas comme la mise en page tiré dessus. Je me réfère à la personnalisation quelque chose comme: http://groups.google.com/group/javascript-information-visualization-toolkit/browse_thread/thread/a4a059cbeb10ba23/ebf472366cdbbdef?lnk=gst&q=spacetree+nodetype#ebf472366cdbbdef
2. J'ai essayé de mettre le innerHtml dans onCreateLabel méthode example5.js à: mais il semble être de ne rien faire. Bien que, je ne sais pas si c' sera un bon moyen de nœud de personnalisation. Example5 est à l'JIT site web (je ne suis pas autorisé à poster plus d'un lien hypertexte)
3. L'Extension De Graphique.Nœud ... je suis toujours à la recherche de cette option, et il ce point de temps, je ne sais pas combien il est compliqué d'avoir de l'espace arbre d'utilisation Graphique.myNode et quel sera le Graphique.myNode même ressembler? J' besoin de penser plus sur ces lignes et voir si c'est encore possible.

J'apprécie toute l'aide ou de fournir quelques indications. Merci beaucoup.

Ram

Answer 1

Le Spacetree peuvent être personnalisés beaucoup. Les nœuds peuvent afficher des images ou tout ce que nous voulons. Nous pouvons avoir personnalisé cliquez sur événements pour les nœuds. Pour des événements, vous aurez pour redessiner l'ensemble de l'arbre dans l'événement onclick.

Ici est un exemple. Sur le succès de la fonction de l'événement click. Ici, j'ai appelé l'événement click sur la classe "cliquables"

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

Le nom de la propriété peut être utilisée pour donner à l'image comme ceci:

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

Marquer comme Réponse si utile. merci.

Answer 2

Vous pouvez faire de votre nœud l’ancêtre prototype de Graph.node, configurer les emplacements souhaités, puis ajouter les personnalisations de code de rendu / force appropriées.

Answer 3

J'utilise spacetrees et je viens de définir le type d'étiquette sur HTML (qui est la valeur par défaut) et vous pouvez simplement utiliser HTML et CSS standard pour styliser vos étiquettes. J'ai des images, des liens, du texte, etc.

Notez que vous travaillez avec l' étiquette et non le nœud . Le nœud est le composant graphique. l'étiquette est le visuel que vous voyez qui représente le nœud.

Lorsque vous initialisez le spacetree, transmettez une fonction pour "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 cela ne vous dérange pas de travailler uniquement avec HTML5 / Canvas, essayez également http://orgplot.codeplex.com , un nœud d’image prenant en charge une interface simple.

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

});