Javascript InfoVis SpaceTree: verhindern, dass der ausgewählte Knoten auf dem Zentrieren canvass

Question

Ich bin mit dem Javascript InfoVis SpaceTree. Ich habe einen Baum, der aussieht wie die folgenden:

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

Allerdings möchte ich die ‚NOW‘ Knoten so wählen, dass sie den Weg zurück zu dem Wurzelknoten hebt aber verhindern, dass dieser Knoten aus Zentrierung. das heißt:.

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

Ich habe versucht, setPos() , aber das funktioniert nicht.

Irgendwelche Ideen?

Hinzugefügt Schirmkappen für alle Fälle Links gehen weg:

Answer 1

Ach, das wieder Graph Bibliothek durcheinander: D

Lassen Sie uns noch einen Blick auf diese Funktion wählen, insbesondere die onComplete Rückruf:

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

So, da Sie überhaupt keine Neupositionierung wollen, können wir es (auch als Löschen einige Zeilen bekannt) Refactoring:

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

Schauen Sie MA! Ich sparte Tonnen Bytes !!! Das ist alles, was Ruhe benötigt tut nichts entscheidend für die grafische Darstellung.

Natürlich nur die Funktionalität loszuwerden kann beißen Sie einen Tag zurück, so dass wir einen center param zu select hinzufügen sollten:

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

Stellen Sie die offsetX und offsetY Positionen wie folgt aus:

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
    },

Die InfoVis div, das heißt der div, die die spacetree halten würde die gesamte grafische Darstellung manchmal nicht angezeigt. Hinzufügen von dem folgenden Code in onComplete Ereignisse würde den Trick tun.

Dies würde die Höhe des div setzen Sie das gesamte Graphen anzupassen. Ich verwende Orientierung als '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");
    }

Danke.