how do i set individual levelDistance for each level in spacetree when i set node.data.$width and label.style.width tree drawn with no equal edge
How to set levelDistance for each node level in the spacetree. For instance, I want to change the 'levelDistance' for node level 3. Thank you
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
}
It is not possible to have different distances for different levels.
What you can do is to change the node.data.$size of the level, so it displays smaller or bigger than the other leaves.
Think the distance as an allocated space for the node to be placed in. If you create a node with a size smaller than the distance, you will get a gap, which can be seeing as a "border" (just visually) at the external part of it.