Javascript InfoVis SpaceTree: empêche le nœud sélectionné de centrer sur la toile

Question

J'utilise l'InfoSpace Javascript InfoVis. J'ai un arbre qui ressemble à ce qui suit:

http://zygonia.net/so/ex2.html

Cependant, je veux choisir le nœud « maintenant » de sorte qu'il met en évidence le chemin du retour au nœud racine, mais empêcher ce noeud de centrage . i.e. .:

http://zygonia.net/so/ex3.html

J'ai essayé setPos() mais cela ne fonctionne pas.

Des idées?

captures d'écran AJOUTS dans les liens de cas vont loin:

Answer 1

Ah, que foiré bibliothèque graphique à nouveau: D

Jetons un coup d'oeil à ce sélectionnez la fonction, en particulier le onComplete rappel:

onComplete: function(){ // what a mess! 
    group.hide(group.prepare(getNodesToHide.call(that)), complete); // hide the nodes??? 
    geom.setRightLevelToShow(node, canvas); // guess what this already moves stuff around! 
    that.compute("current"); // recomputes the graphs position 
    that.graph.eachNode(function(n) { // sets up the moved node positions 
     var pos = n.pos.getc(true); 
     n.startPos.setc(pos.x, pos.y); 
     n.endPos.setc(pos.x, pos.y); 
     n.visited = false; 
    }); 

    // hey look! We don't use a global translation offset! So we need to translate the HTML stuff extra 
    var offset = { x: complete.offsetX, y: complete.offsetY }; 
    that.geom.translate(node.endPos.add(offset).$scale(-1), ["start", "current", "end"]); 

    // show the nodes again? 
    group.show(getNodesToShow.call(that));    

    // the first useful call in here, redraw the updated graph! 
    that.plot(); 
    complete.onAfterCompute(that.clickedNode); // callback better leave them here 
    complete.onComplete(); 
} 

Donc, puisque vous ne voulez pas re-positionnement du tout, nous pouvons factoriser (aussi connu comme la suppression de certaines lignes) il:

onComplete: function(){    
    that.plot(); 
    complete.onAfterCompute(that.clickedNode); 
    complete.onComplete(); 
} 

Regardez ma! J'ai sauvé des tonnes d'octets !!! C'est tout ce qu'il faut, le repos ne fait rien de vital pour le graphique.

Bien sûr, juste se débarrasser de la fonctionnalité peut vous mordre revenir un jour, donc nous devrions ajouter center param à select:

select: function(id, center, onComplete) { 

.... 

onComplete: function(){ 
    if (center) { 
     group.hide(group.prepare(getNodesToHide.call(that)), complete); 
     geom.setRightLevelToShow(node, canvas); 
     that.compute("current"); 
     that.graph.eachNode(function(n) { 
      var pos = n.pos.getc(true); 
      n.startPos.setc(pos.x, pos.y); 
      n.endPos.setc(pos.x, pos.y); 
      n.visited = false; 
     }); 
     var offset = { x: complete.offsetX, y: complete.offsetY }; 
     that.geom.translate(node.endPos.add(offset).$scale(-1), ["start", "current", "end"]); 
    } 
    group.show(getNodesToShow.call(that));    
    that.plot(); 
    complete.onAfterCompute(that.clickedNode); 
    complete.onComplete(); 
} 

Answer 2

Définissez les positions OffsetX et offsetY comme ceci:

var st = new $jit.ST({ 
    'injectInto': 'infovis', 
    //set duration for the animation 
    duration: 800, 
    //set animation transition type 
    transition: $jit.Trans.Quart.easeInOut, 
    //set distance between node and its children 
    levelDistance: 50, 
    //set max levels to show. Useful when used with 
    //the request method for requesting trees of specific depth 
    levelsToShow: 4, 
    orientation: 'top', 
    align: 'center', 
    //set node and edge styles 
    //set overridable=true for styling individual 
    //nodes or edges 
    offsetX: 0, offsetY: 110, 
    Node: { 
     height: 30, 
     width: 31, 
     //use a custom 
     //node rendering function 
     type: 'nodeline', 
     color: '#f76b14', 
     lineWidth: 1, 
     align: "center", 
     overridable: true 
    }, 

La division infovis, c'est-à-dire la division qui contient l'espace-distance, n'afficherait pas le graphique entier à certains moments. L'ajout du code suivant dans l'événement onComplete ferait l'affaire.

Cela définirait la hauteur de la div pour s'adapter à l'ensemble du graphique. J'utilise l'orientation comme 'top'.

onComplete: function() { 
     var LastnodeTop = 0; 
     $("div.node").each(function() { 
      var pos = $(this).position(); 
      if (pos.top > LastnodeTop) 
       LastnodeTop = pos.top; 
     }); 
     var LastnodeTopStr = LastnodeTop.toString(); 
     LastnodeTopStr = LastnodeTopStr.substring(0, 4); 
     var LastnodeTopInt = parseInt(LastnodeTopStr) + 100;    
     $("#infovis").attr("style", "height:" + LastnodeTopInt + "px"); 
    } 

Merci.