我正在使用Javascript InfoVis SpaceTree。我有一棵樹,看起來像下面這樣:Javascript InfoVis SpaceTree:防止選中的節點集中在畫布上
不過,我要選擇「NOW」節點,以便它突出的路徑返回到根節點但阻止該節點的中心。即:
我試圖setPos()
但這不起作用。
任何想法?
新增屏蓋,以防萬一鏈接消失:
我正在使用Javascript InfoVis SpaceTree。我有一棵樹,看起來像下面這樣:Javascript InfoVis SpaceTree:防止選中的節點集中在畫布上
不過,我要選擇「NOW」節點,以便它突出的路徑返回到根節點但阻止該節點的中心。即:
我試圖setPos()
但這不起作用。
任何想法?
新增屏蓋,以防萬一鏈接消失:
啊,那又搞砸了圖形庫: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();
}
設置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");
}
謝謝。
我會放下幾個截圖,這樣這個問題不會被我的意外鏈接腐爛。 – Kev 2011-06-04 22:12:33