如何为spacetree中的每个级别设置单独的levelDistance 当我设置node.data。$ width和label.style.width树没有相等的边缘
如何为spacetree中的每个节点级别设置levelDistance。例如，我想更改节点级别3的“levelDistance”。谢谢
function init(){
//init data
json = {
id: "node0",
name: "zvet",
data: {},
children: [{
id: "node0rrrrrr1",
name: "1.3",
data: {$orn:'left'},
children: [{
id: "fvwerr1",
name: "w33",
data: {$orn:'left'},
}]
},
{
id: "node02",
name: "qwe",
data: {$orn:'left'}
} ,{
id: "node03",
name: "bnm",
data: {$orn:'left'}
} ,{
id: "node04",
name: "1.3",
data: {$orn:"right",kk:"kk"}
},
{
id: "vwer",
name: "vfsewrg",
data: {$orn:"right",kk:"kk"}
},
{
id: "vweq33e",
name: "vvvserser",
data: {$orn:"right",kk:"kk"},
children: [{
id: "r345345",
name: "w33",
data: {$orn:'right'}
},
{
id: "u786786",
name: "w33",
data: {$orn:'right'}
},
{
id: "p809456",
name: "w33",
data: {$orn:'right'},
children: [{
id: "weqr232344",
name: "w33",
data: {$orn:'right',kk:"kk"},
children: [{
id: "weqoooooppp",
name: "w33",
data: {$orn:'right'}
}]
}]
}
]
}
]
};
//end
//init Spacetree
//Create a new ST instance
st = new $jit.ST({
//id of viz container element
injectInto: 'infovis',
Canvas:{
type: '2D'} ,
background:true,
//set duration for the animation
duration: 800,
//set animation transition type
transition: $jit.Trans.Quart.easeInOut,
//set distance between node and its children
levelDistance: 100,
levelsToShow:5,
multitree: true,
//enable panning
Navigation: {
enable:true,
panning:true
},
//set node and edge styles
//set overridable=true for styling individual
//nodes or edges
Node: {
height: 20,
width: 150,
type: 'rectangle',
color:'transparent',
overridable: true,
autoWidth:false ,
CanvasStyles: {
fillStyle: 'transparent'
}
},
Edge: {
type: 'bezier',
overridable: true
},
onBeforeCompute: function(node){
Log.write("loading " + node.name);
},
onAfterCompute: function(){
Log.write("done");
},
//This method is called on DOM label creation.
//Use this method to add event handlers and styles to
//your node.
onCreateLabel: function(label, node){
label.id = node.id;
label.innerHTML = node.name;
label.innerHTML='<div style="position:relative;">'+node.name+'</div>';
label.onclick = function(){
if(normal.checked) {
st.onClick(node.id);
//st.setRoot(node.id, 'animate');
st.selectedNodeId=node.id;
$("#"+node.id+" div").animate({"bottom":"+=10px"},"slow");
//st.addNodeInPath("1234");
} else {
st.setRoot(node.id, 'animate');
}
};
//set label styles
var style = label.style;
style.width = 150 + 'px';
style.height = 17 + 'px';
style.cursor = 'pointer';
style.color = '#fff';
style.backgroundColor = '#6257DD';
style.borderradius='14px';
style.boxshadow='0 0 16px #FFFFFF';
style.fontSize = '0.8em';
style.textAlign= 'center';
style.paddingTop = '3px';
if(node.data.kk=="kk")
{
style.width = 60+ 'px';
}
},
onPlaceLabel: function(label, node) {
} ,
//This method is called right before plotting
//a node. It's useful for changing an individual node
//style properties before plotting it.
//The data properties prefixed with a dollar
//sign will override the global node style properties.
onBeforePlotNode: function(node){
if(node.data.kk=="kk")
{
node.data.$width = 60;
}
//add some color to the nodes in the path between the
//root node and the selected node.
if (node.selected) {
node.data.$color = "#000000";
$("#"+node.id).css("background-color","red");
}
else {
delete node.data.$color;
$("#"+node.id).css("background-color","#6257DD");
//if the node belongs to the last plotted level
if(!node.anySubnode("exist")) {
//count children number
var count = 0;
node.eachSubnode(function(n) { count++; });
//assign a node color based on
//how many children it has
node.data.$color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'][count];
}
}
},
//This method is called right before plotting
//an edge. It's useful for changing an individual edge
//style properties before plotting it.
//Edge data proprties prefixed with a dollar sign will
//override the Edge global style properties.
onBeforePlotLine: function(adj){
if (adj.nodeFrom.selected && adj.nodeTo.selected) {
adj.data.$color = "#eed";
adj.data.$lineWidth = 3;
}
else {
delete adj.data.$color;
delete adj.data.$lineWidth;
}
}
});
//load json data
//end
//Add event handlers to switch spacetree orientation.
var top = $jit.id('r-top'),
left = $jit.id('r-left'),
bottom = $jit.id('r-bottom'),
right = $jit.id('r-right'),
normal = $jit.id('s-normal');
function changeHandler() {
if(this.checked) {
top.disabled = bottom.disabled = right.disabled = left.disabled = true;
st.switchPosition(this.value, "animate", {
onComplete: function(){
top.disabled = bottom.disabled = right.disabled = left.disabled = false;
}
});
}
};
st.loadJSON(json);
//compute node positions and layout
st.compute();
//optional: make a translation of the tree
st.geom.translate(new $jit.Complex(-200, 0), "current");
//emulate a click on the root node.
st.onClick(st.root);
st.select(st.root);
top.onchange = left.onchange = bottom.onchange = right.onchange = changeHandler;
//end
}
答案 0 :(得分：0)
不同级别的距离不可能。
您可以做的是更改关卡的node.data。$ size，因此它显示的小于或大于其他叶子。
将距离视为要放置节点的已分配空间。如果创建的节点的大小小于距离，则会产生间隙，可以看作是“边框”（只是在视觉上）在它的外部。