Javascript InfoVis SpaceTree：防止选定的节点居中在画布上

Question

我正在使用Javascript InfoVis SpaceTree。我有一棵树，看起来像这样：

然而，我想选择“NOW”节点，以便突出显示返回到根节点的路径，但防止该节点居中。即：

我尝试了 setPos()，但它不起作用。

有什么想法吗？

这里有一个 GitHub 存储库，其中包含源代码的完整自包含副本（可悲的是，自从我最初提出这个问题以来，我的网站已经消失了）：

https://github.com/kevinkenny/so4418163

在这个例子中，文件ex2.html包含生成第一张图片的标记，ex3.html包含呈现底部图片的标记。

- Kev

---

我会放几张截图，这样我的问题就不会因为我意外的链接失效而变得无用了。 - Kev

@Torxed - 如果您撤回了负评，我会将它们放在Github的gist上。此外，这是一个十年前的帖子，请给我点面子 :) - Kev

给我一个小时左右，可能需要一些追踪。 - Kev

哈哈，是的，老实说我甚至没有想到会有人回来看这里，因为帖子太旧了。更不用说你真的找到了代码，真棒！它对我帮助很大！你对帖子所做的更改足以让我将其改为点赞，非常感谢你的帮助！ :) - Torxed

很棒。很高兴这能帮到你。虽然 Ivo（参见他的回答）是真正的英雄，将我从失败的重力井中拯救出来。 - Kev

Answer 1

啊，又是那个搞砸了的图形库 :D

让我们再来看看那个选择函数，特别是 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();
}

看吧，妈妈！我节省了大量的字节!!! 这就是需要的所有内容，休息对图表没有任何重要作用。

当然，仅仅摆脱功能可能会在某一天反噬你，因此我们应该向select添加一个center参数：

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

- Ivo Wetzel

Answer 2

像这样设置offSetX和offSetY的位置：

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

infovis div，也就是包含 spacetree 的 div 有时候无法显示整个图形。 在 onComplete 事件中添加以下代码可以解决问题。

这会设置 div 的高度以容纳整个图形。 我使用的方向是“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");
    }

谢谢。

- Sunil Raj