Javascript InfoVis SpaceTree: prevent the selected node centering on the canvass

Question

I am using the Javascript InfoVis SpaceTree. I have a tree that looks like the following:

However I want to select the 'NOW' node so that it highlights the path back to the root node but prevent this node from centering. i.e.:

I tried setPos() but this doesn't work.

Any ideas?

Here's a github repo with a full working self-contained copy of the source (sadly my website has gone away since I originally asked this question):

https://github.com/kevinkenny/so4418163

In the example the file ex2.html contains the markup that generates the first image, ex3.html contains the markup that renders the bottom image.

Answer 1

Ah, that messed up Graph library again :D

Let's take another look at that select function, specifically the onComplete callback:

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 since you don't want any re-positioning at all, we can refactor(also known as deleting some lines) it:

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

Look ma! I saved tons of bytes!!! That's all that's needed rest doesn't do anything vital to the graph.

Of course just getting rid of the functionality may bite you back some day, so we should add a center param to 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();
}