Javascript InfoVis SpaceTree：防止選中的節點集中在畫布上

Question

我正在使用Javascript InfoVis SpaceTree。我有一棵樹，看起來像下面這樣：

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

不過，我要選擇「NOW」節點，以便它突出的路徑返回到根節點但阻止該節點的中心。即：

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

我試圖setPos()但這不起作用。

任何想法？

新增屏蓋，以防萬一鏈接消失：

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

媽媽快看！我節省了噸字節！這就是所需要的，休息對圖形沒有任何重要作用。

當然剛剛擺脫的功能，有一天可能會咬你回來，所以我們應該添加一個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(); 
} 

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的高度以適應整個圖形。 我使用方向爲'頂部'。

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

謝謝。