Displaying a very large graph using JIT

Question

I want to show a unidirectional graph to the user in a webpage. I am currently using JavaScript InfoVis Toolkit (JIT) as the visulization library.

The problem is that the graph has many nodes and edges and the browser cannot keep up with all of it and slows down. Here is a screenshot of part a graph:

I think the problem will be solved if the graph is shown partially. So when user clicks on a node that node and nodes around it should be expanded (shown) and some far nodes should be collapsed (hidden) to prevent performance issues.

Based on this idea I I've written a simple code that expands a node and puts it in center when a user clicks on it and collapse previous centered node. It is not a very efficient and wise way for showing nodes, anyway it doesn't work. It just collapses all the nodes and fails to expand the current clicked node.

Here is the code:

onClick: function(node,eventInfo,e) {
    if(node==false) 
    {
        return;
    }

    if(rgraph.previousexpand!=false)
    {
        if(rgraph.previousexpand.id!=node.id)
        {
            rgraph.op.contract(rgraph.previousexpand, {  
                type: 'animate',  
                duration: 3000,  
                hideLabels: true,  
                transition: $jit.Trans.Quart.easeOut  
            });                 
        }
    }

    rgraph.previousexpand = node;
    rgraph.op.expand(rgraph.previousexpand, {  
       type: 'animate',  
       duration: 3000,  
       hideLabels: true,  
       transition: $jit.Trans.Quart.easeOut  
    }); 

    rgraph.onClick(node.id);
}

And in initialization:

rgraph.previousexpand=false;

First, do you know any better way for showing a very large graph? Is there any other solution in JIT or maybe other library that show graph in this way?

Second, what i am missing in the code?