Javascript InfoVis SpaceTree:防止选定节点以画布为中心
我正在使用Javascript InfoVis SpaceTree。我有一棵如下所示的树: 但是,我希望选择“NOW”节点,以便它突出显示返回根节点的路径,但防止该节点居中。i、 e: 我试过了,但没用 有什么想法吗 这是一份github回购协议,其中包含完整的源代码副本(遗憾的是,自从我最初提出这个问题以来,我的网站就消失了):Javascript InfoVis SpaceTree:防止选定节点以画布为中心,javascript,visualization,charts,infovis,Javascript,Visualization,Charts,Infovis,我正在使用Javascript InfoVis SpaceTree。我有一棵如下所示的树: 但是,我希望选择“NOW”节点,以便它突出显示返回根节点的路径,但防止该节点居中。i、 e: 我试过了,但没用 有什么想法吗 这是一份github回购协议,其中包含完整的源代码副本(遗憾的是,自从我最初提出这个问题以来,我的网站就消失了): 在本例中,文件ex2.html包含生成第一个图像的标记,ex3.html包含呈现底部图像的标记。啊,这又是一个混乱的图形库:D 让我们再看看select函数,特
在本例中,文件
ex2.html
包含生成第一个图像的标记,ex3.html
包含呈现底部图像的标记。啊,这又是一个混乱的图形库: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();
}
因此,由于您根本不想重新定位,我们可以重构(也称为删除某些行)它:
看,妈妈!我节省了大量字节!!!这就是所需的全部休息对图表没有任何重要作用
当然,有一天,仅仅是取消该功能可能会让您感到痛苦,因此我们应该在选择中添加中心
参数:
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();
}
如下所示设置偏移量X和偏移量位置:
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,即保存空间树的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");
}
谢谢。我将删除几个截图,这样这个问题就不会因为我的意外链接失败而变得毫无用处。如果链接没有被破坏的话*叹息*。。同样的问题,但我不知道下面的组和和和geom
指的是什么,所以这个问题还没有定论。给我一个小时左右的时间,可能需要一些追踪。哈哈,是的,我真的没想到有人会回头看看这篇文章有多老。更不用说你真的找到了代码,真是太好了!这也帮了不少忙!你对这篇文章所做的改动足以让我把它改成一个向上投票,也非常感谢你的帮助!:)绝妙的。很高兴这能帮上忙。虽然伊沃(见他的答案)是真正的英雄,是他把我从失败的深渊中拉了出来。
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");
}