I am newbie with javascript coding - can anyone help me with the InfoVis Spacetree? I am trying to set the width and height of a certain level of nodes to be smaller than the rest. It seems like I put it in the data: {} but when I tried data:{"$height":"30"} it screws up the whole tree...

I am newbie with javascript coding - can anyone help me with the InfoVis Spacetree? I am trying to set the width and height of a certain level of nodes to be smaller than the rest. It seems like I put it in the data: {} but when I tried data:{"$height":"30"} it screws up the whole tree...

• javascript
• coding-style
• infovis
• thejit
• space-tree

2 Answers 2

The way I am doing it, is to put some information in these special node's data array then when its time to draw it, I will do the modification only on these nodes.

Data:

var json = 
{
    'id':'id0.0',  
    'name':'Root',  
    'data':
    {
        'mytype':'1'
    }, 

    'children':
    [
        {
            'id':'id1.0',  
            'name':'Node 1.0', 
            'data':
            {
                'mytype':'2'
            }, 

            'children':
            [
                {
                    'id':'id2.0',  
                    'name':'Node 2.0'
                }, 

                {
                    'id':'id2.1',  
                    'name':'Node 2.1'
                }, 

                {
                    'id':'id2.2',  
                    'name':'Node 2.2'
                }
            ]
        }
    ]
};

So you can see that some node have a data element named mytype, you have to look out for these when the tree is getting drawn. To do that you have to implement the onBeforePlotNode function. This method is useful for changing a node style right before plotting it.

Here is the code for the SpaceTree Creation that will handle your special nodes :

myTree = new $jit.ST({
    //id of viz container element
    injectInto: 'MyGraph',
    orientation: 'top',
    duration: 200,
    transition: $jit.Trans.Quart.easeInOut,
    levelDistance: 50,


    //enable panning
    Navigation: 
    {
      enable:true,
      panning:true,
      zooming:20
    },


    //set node and edge styles
    //set overridable=true for styling individual
    //nodes or edges
    Node: {
        overridable: true,  
        autoWidth: true,  
        autoHeight: true,  
        type: 'rectangle'  
    },

    Edge: {
        type: 'bezier',
        overridable: true
    },


    onBeforePlotNode: function(node)
    {
        //if(node.data.class == 'node') 
        if(node.data.mytype == '2') 
        {
            node.data.$height = 60;                    
        }
    },
});

You can see the OnBeforePlotNode is looking at the node's data to see if its a special one. Then you can modify only these nodes.

Set the offSetX and offSetY positions like this:

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
    },

The infovis div, i.e., the div which holds the spacetree would not display the whole graph at times. Adding the following code in onComplete event would do the trick.

This would set the height of the div to acmodate the whole graph. I am using orientation as 'top'.

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");
    }

Thanks.