Javascript InfoVis SpaceTree:阻止选定的节点以画布为中心

Question

我正在使用Javascript InfoVis SpaceTree.我有一棵树,如下所示:

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

但是,我想选择"NOW"节点,以便突出显示返回根节点的路径,但阻止此节点居中.即:

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

我试过setPos()但这不起作用.

有任何想法吗？

添加屏幕大小以防万一链接消失:

Answer 1

啊,再次弄乱了Graph库:D

让我们再看看那个select函数,特别是onComplete回调函数:

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

因此,既然您根本不需要任何重新定位,我们可以重构(也称为删除某些行):

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

看马!我节省了大量的字节!这就是所有需要休息的事情并没有对图表做任何重要的事情.

当然,只是摆脱功能可能会让你有一天回来,所以我们应该添加一个center参数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();
}