Spacetree - implementation problem

155 views
Skip to first unread message

Venkat

unread,
Sep 22, 2009, 8:11:47 PM9/22/09
to JavaScript Information Visualization Toolkit
The space tree model shown at http://thejit.org/Jit/Examples/Spacetree/example1.html
is very useful for me as I am implementing a previous-current-next
page flow visualization model to track pages visited on a website in
the order of visits.

I am facing a problem with having duplicate nodes in JSON, something
like this scenario.

Node2 and Node3 are previous pages to Node1. As Node2 and Node3 must
point to Node1 in the graph, I am using two identical entries of Node1
in the JSON as children to Node2 and Node3, one each. Suppose, Node4
and Node5 are children to Node1, the problem comes when plotting the
graph when Node4 or Node5 is selected. There is an ambiguity as to
which node is the grandparent to Node4 as there are two possibilities
with each copy Node1. The graph breaks.

I would appreciate any suggestions or workarounds to implement this
scenario successfully. Thanks for the cool toolkit :)

Venkat



Nico Garcia Belmonte

unread,
Sep 23, 2009, 2:16:17 PM9/23/09
to javascript-information...@googlegroups.com
I'd try to keep the same name but different node ids. Just add some variable prefix/suffix to the nodes' id (like an increment param or something like that).
--
I would never die for my beliefs because I might be wrong.

Bertrand Russell

venkatesh kavuluri

unread,
Sep 23, 2009, 6:19:22 PM9/23/09
to javascript-information...@googlegroups.com
Hi Nico,

Thank you for the suggestion. That helps.

I have one more request, I want to build the JSON data dynamically each time when we click on a node to fetch the next pages/ child node information from the database. I am planning to make ajax calls to PHP based API methods which in turn make database calls and then rebuild JSON object with the new data. I would then try to simulate a click on the node which was initially clicked so that the tree would now display the nodes recently fetched from the database.

I wonder if this is a better implementation, I am not sure if would break the animation effect of the continuous tree flow when ajax calls are made.

Is there any better solution for this scenario ?

Thanks a lot for any pointers.

Venkatesh

Nico Garcia Belmonte

unread,
Sep 23, 2009, 6:21:18 PM9/23/09
to javascript-information...@googlegroups.com

venkatesh kavuluri

unread,
Sep 23, 2009, 6:37:46 PM9/23/09
to javascript-information...@googlegroups.com
Thank you once again, I am trying the same scenario where JSON is build dynamically. Can I know how you were making the initial call once you click on a node, I mean how you were sending the selected node's id to the server from java script to build a new JSON.

Thank you.

Venkat

Nico Garcia Belmonte

unread,
Sep 24, 2009, 2:52:25 AM9/24/09
to javascript-information...@googlegroups.com
I was using the onCreateLabel controller method and adding an onclick event to the domElement (just like it's done in the examples), but instead of calling the onClick method for the visualization, I used some DOM manipulation library like MooTools [1] or JQuery [2] to make an Ajax call.

[1] http://mootools.net

http://mootools.net/docs/core/Request/Request.JSON


[2] http://jquery.com

http://docs.jquery.com/Ajax

venkatesh kavuluri

unread,
Sep 24, 2009, 12:40:39 PM9/24/09
to javascript-information...@googlegroups.com
Thanks a lot for the detailed explanation. It will help me a lot.

Venkat

venkatesh kavuluri

unread,
Oct 2, 2009, 9:27:24 PM10/2/09
to javascript-information...@googlegroups.com
Hi again,

I am able to plot the space-tree model with dynamic json on the fly - thanks to you guys. I have one problem related to animation of the tree. It is like this -

Suppose, I have a parent node and 4 child nodes. When I click on the 1st sibling (1st child), other 3 siblings should disappear one-by-one with the tree animating/re-positioning with each node disappearance. I am able to achieve the scenario but all the nodes are being deleted at one go because I am unable to render the graph after each node deletion logic. Is there any way in which we can force the tree to render after each loop where a node gets deleted. I guess I will try calling morph function to render the tree after each node deletion by actually removing each node from my json at a time. Thought of approaching you guys for any better approach.

If it is of some relevance, after clicking 1st child, I am making it as root node and making an ajax call to fetch new json and then firing the morph function to render the tree with the new structure.

Thanks a lot for any pointers or suggestions.

Venkat

venkatesh kavuluri

unread,
Oct 2, 2009, 11:16:54 PM10/2/09
to javascript-information...@googlegroups.com
Hi once again,

In extension to my previous post an hour ago ..

I tried firing the morph function after deleting a child node - at the bottom of the for-loop which loops through an array of nodes and deletes them one by one and fires the morph function. But, after morph operation successfully showing the first node deleted, control doesn't return to the for-loop to delete remaining nodes. I guess I might have to simulate a node click at the end of the morph function definition in jit.js file.

Am I proceeding in a correct way !! Thanks for any help.

Venkat
Reply all
Reply to author
Forward
0 new messages