Hi all,
I am working on a spacetree. I want to show the path of my result
search from root node to leaf node initially. Please help me... I am
able to change the color of node and edge when the node is clicked.
but what i want is initially the tree should highlight the path by
changing the color of node and edges.
my code is
var labelType, useGradients, nativeTextSupport, animate;
(function() {
var ua = navigator.userAgent,
iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
typeOfCanvas = typeof HTMLCanvasElement,
nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas
== 'function'),
textSupport = nativeCanvasSupport
&& (typeof
document.createElement('canvas').getContext('2d').fillText ==
'function');
//I'm setting this based on the fact that ExCanvas provides text
support for IE
//and that as of today iPhone/iPad current text support is lame
labelType = (!nativeCanvasSupport || (textSupport && !iStuff))?
'Native' : 'HTML';
nativeTextSupport = labelType == 'Native';
useGradients = nativeCanvasSupport;
animate = !(iStuff || !nativeCanvasSupport);
})();
var Log = {
elem: false,
write: function(text){
if (!this.elem)
this.elem = document.getElementById('log');
this.elem.innerHTML = text;
this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
}
};
function init(){
//init data
var json = {
id: "node1",
name: "Analytics",
data: {},
children: [{
id: "node2",
name: "Explanatory Statistics",
data: {},
children: [{
id: "node3",
name: "Description Statistics",
data: {},
children: [{
id: "node4",
name: "Univariate",
data: {},
children: [{
id: "node5",
name: "Numeric",
data: {},
children: [{
id: "node6",
name: "Statistics",
data: {},
children: []
}]
},{
id: "node7",
name: "Categorical",
data: {},
children: [{
id: "node8",
name: "Charting",
data: {},
children: []
}]
}]
},{
id: "node9",
name: "Bivariate",
data: {},
children: [{
id: "node10",
name: "Numeric",
data: {},
children: [{
id: "node11",
name: "Pearson correlation coefficient",
data: {},
children: []
},{
id: "node12",
name: "Spearman Rank",
data: {},
children: []
},{
id: "node13",
name: "Mutual Information",
data: {},
children: []
}]
},{
id: "node14",
name: "Categorical",
data: {},
children: [{
id: "node15",
name: "Chi-Square Test",
data: {},
children: []
}]
}]
},{
id: "node16",
name: "Multivariate",
data: {},
children: [{
id: "node17",
name: "Numeric",
data: {},
children: [{
id: "node18",
name: "PCA",
data: {},
children: []
},{
id: "node19",
name: "Factor Analysis",
data: {},
children: []
}]
}]
}]
},{
id: "node20",
name: "Inferential statistics",
data: {},
children: [{
id: "node21",
name: "Parameter Estimation",
data: {},
children: [{
id: "node22",
name: "Z-Test",
data: {},
children: []
},{
id: "node23",
name: "T-Test",
data: {},
children: []
},{
id: "node24",
name: "Chi-Squared Test",
data: {},
children: []
}]
},{
id: "node25",
name: "Hypothesis",
data: {},
children: [{
id: "node26",
name: "Mean Proportion",
data: {},
children: []
},{
id: "node27",
name: "Students t-test",
data: {},
children: []
},{
id: "node28",
name: "variance (chi-square hypthesis test)",
data: {},
children: []
},{
id: "node29",
name: "ANOVA",
data: {},
children: []
}]
}]
}]
},{
id: "node30",
name: "Predictive Models",
data: {},
children: [{
id: "node39",//---------
name: "Surrogate Model",
data: {},
children: [{
id: "node40",
name: "Supervised",
data: {},
children: [{
id: "node41",
name: "Classification",
data: {},
children: [{
id: "node42",
name: "Binary Response",
data: {},
children: [{
id: "node43",
name: "Classification Tree",
data: {},
children: []
},{
id: "node44",
name: "Logistic Regression",
data: {},
children: []
}]
},{
id: "node45",
name: "Categorical Response",
data: {},
children: [{
id: "node46",
name: "C4.5 Decision Tree",
data: {},
children: []
},{
id: "node47",
name: "Support Vector Machine",
data: {},
children: []
},{
id: "node48",
name: "Linear Discriminent Analysis",
data: {},
children: []
},{
id: "node49",
name: "Naive Bayes Classifier",
data: {},
children: []
}]
}]
},{
id: "node50",
name: "Regression",
data: {},
children: [{
id: "node51",
name: "Numeric Response",
data: {},
children: [{
id: "node52",
name: "Regression Tree",
data: {},
children: []
},{
id: "node53",
name: "Multiple linear Regression",
data: {},
children: []
},{
id: "node54",
name: "Artificial neural networks",
data: {},
children: []
},{
id: "node55",
name: "K-nearest neighbor algorithm",
data: {},
children: []
}]
}]
}]
},{
id: "node56",
name: "Unsupervised",
data: {},
children: [{
id: "node57",
name: "Association Rules",
data: {},
children: []
},{
id: "node58",
name: "Clustering",
data: {},
children: [{
id: "node59",
name: "Agglomerative hierarchical clustering",
data: {},
children: []
},{
id: "node60",
name: "K-means clustering",
data: {},
children: []
}]
},{
id: "node61",
name: "Regression",
data: {},
children: [{
id: "node62",
name: "Generalised additive model",
data: {},
children: []
},{
id: "node63",
name: "ARIMA",
data: {},
children: []
}]
}]
}]
},{
id: "node31",
name: "System Models",
data: {},
children: [{
id: "node32",
name: "Physics Based",
data: {},
children: [{
id: "node33",
name: "Electromegnetic",
data: {},
children: []
},{
id: "node34",
name: "Computational fluid dynamics",
data: {},
children: []
},{
id: "node35",
name: "Finite Element Method",
data: {},
children: []
}]
}, {
id: "node36",
name: "Logic Based",
data: {},
children: [{
id: "node37",
name: "System Dynamics",
data: {},
children: []
}, {
id: "node38",
name: "Agent Based Model",
data: {},
children: []
}]
}]
},
]
}]
};
//alert("1.---Jason created");
//end
// Round corners
$jit.ST.Plot.NodeTypes.implement({
'roundrect': {
'render': function(node, canvas, animating) {
var pos = node.pos.getc(true), nconfig = this.node, data =
node.data;
var width = nconfig.width, height = nconfig.height;
var algnPos = this.getAlignedPos(pos, width, height);
var ctx = canvas.getCtx(), ort = this.config.orientation;
ctx.beginPath();
var r = 10; //corner radius
var x = algnPos.x;
var y = algnPos.y;
var h = height;
var w = width;
ctx.moveTo(x + r, y);
ctx.lineTo(x + w - r, y);
ctx.quadraticCurveTo(x + w, y, x + w, y + r);
ctx.lineTo(x + w, y + h - r);
ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
ctx.lineTo(x + r, y + h);
ctx.quadraticCurveTo(x, y + h, x, y + h - r);
ctx.lineTo(x, y + r);
ctx.quadraticCurveTo(x, y, x + r, y);
ctx.fill();
}
}
});
//preprocess subtrees orientation
var arr = json.children, len = arr.length;
for(var i=0; i < len; i++) {
//split half left orientation
if(i < len / 2) {
arr[i].data.$orn = 'left';
$jit.json.each(arr[i], function(n) {
n.data.$orn = 'left';
});
} else {
//half right
arr[i].data.$orn = 'right';
$jit.json.each(arr[i], function(n) {
n.data.$orn = 'right';
});
}
}
//alert("2.tree has divided into 2 parts");
//init Spacetree
//Create a new ST instance
var st = new $jit.ST({
//id of viz container element
injectInto: 'infovis',
//set duration for the animation
duration: 800,
multitree: true, //multitree
align:"center",
indent:80,
constrained: false,
offsetX:10,
offsetY:10,
//set animation transition type
transition: $jit.Trans.Pow.easeInOut,
//set distance between node and its children
levelDistance: 20,
levelsToShow: 30,
orientation: 'top',
//enable panning
Navigation: {
enable:true,
panning:true
//zooming: 20
},
Label:{
overridable: false,
type: 'HTML', //'SVG', 'Native'
style: ' ',
size: 10,
family: 'sans-serif',
textAlign: 'center',
textBaseline: 'alphabetic',
color: '#fff'
},
//set node and edge styles
//set overridable=true for styling individual
//nodes or edges
Node: {
type: 'roundrect',
height:50,
width:100,
color: '#AD1A1E',
lineWidth: 10,
overridable: true,
},
Edge: {
type: 'bezier', //bezier
color:'#F2210B',
overridable: true
},
NodeStyles: {
enable: true,
stylesClick: {
'color': '#160BF2'
},
stylesHover: {
'dim':10,
'color': '#F2160B'
},
duration: 700
},
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;
/*alert("Lable ID is ="+label.id+"which is == node.ID"+"Node name
=="+node.name);
if(node.name=='PCA')
{
for(var i=60;i>0;i--)
{
node.data.$color = "#A5A5A5";
node.selected=true;
}
} */
label.innerHTML = node.name;
label.onclick = function(){
if(normal.checked) {
st.onClick(node.id);
} else if(root.checked) {
st.setRoot(node.id, 'animate');
}
else{
st.getSubtree(node.id);
}
};
//set label styles
var style = label.style;
style.width = 100 + 'px';
style.height = 40 + 'px';
style.cursor = 'pointer';
style.color = 'black';
style.fontSize = '0.9em';
style.textAlign= 'center';
style.paddingTop = '8px';
style.paddingleft='10px';
style.paddingright='10px';
},
Tips: {
enable: true,
offsetX: 10,
offsetY: 10,
onShow: function(tip, node) {
tip.innerHTML = node.name;
tip.style.overflow = 'hidden';
}
},
//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){
//add some color to the nodes in the path between the
//root node and the selected node.
// alert("03--->onBeforePlotNode node id= "+node.id+" name =
"+node.name);
//if(node.name=="PCA")
//{
//alert ("Check");
//node.data.$color = "#A5A5A5";
//node.selected=true;
/* var id=node.id;
var pars = node.getParents();
alert("no of parents are :" +count(arrParent));
if(pars.length > 0) {
//do stuff with parents
pars[0].data.$color = "#A5A5A5";
alert("no of parents "+pars.length+" parent name =
"+pars[0].name);
}
*/
//}
if (node.selected) {
//alert("03--->onBeforePlotNode node id= "+node.id+" node is
clicked name = "+node.name);
node.data.$color = "#0BCEAA";
}
else {
delete node.data.$color;
//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 = [ '#AD1A1E']
[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){
//alert("3----> onBeforePlotLine"+adj.nodeFrom.name);
if (adj.nodeFrom.selected && adj.nodeTo.selected)
{
adj.data.$color = '#FFFFFF';
adj.data.$lineWidth = 5;
}
else {
delete adj.data.$color;
delete adj.data.$lineWidth;
}
}
});
//load json data
st.loadJSON(json);
//compute node positions and layout
st.compute();
//optional: make a translation of the tree
st.geom.translate(new $jit.Complex(700, 0), "current");
//emulate a click on the root node.
st.onClick(st.root);
//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');
top.onchange = left.onchange = bottom.onchange = right.onchange =
changeHandler;
//end
/
*//----------------------------------------------------------------
var vari = $jit.id('node63');
vari.onClick = function()
{
var n1 = ht.graph.getNode('node63');
if(!n1) return;
delete node.data.$color;
//if the node belongs to the last plotted level
if(!n1.anySubnode("exist")) {
//count children number
var count = 0;
node.eachSubnode(function(n) { count++; });
//assign a node color based on
//how many children it has
adj.data.$lineWidth = 10;
node.data.$color = [ '#Aaaaaa']
[count];
}
}
//---------------------------------------------------------
*/
}
